/* 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 (sign-in redesign 2026-10-22, owner-approved mockup v5): Blitzwood, premium. A split screen — "the bridge" (a
   midnight hero, the height of the screen and pinned while a long pane scrolls: the yacht tile + "Blitz 5" lockup, the
   tagline, the platform drawn as a yacht in the livery and annotated like an F1 technical drawing — its decks the
   modules, the B5 fleet on the horizon the network —, one booking's voyage in five timed sectors, the B5 Agents' line)
   curving into "the deck" (the light canvas: a faint "B5" watermark, Armada's connections lines, the yacht's line art
   behind a flat card). The curve carries the hull line (white boot stripe + red waterline); below 900px the bridge is a
   band whose bottom edge carries it. Yellow is the marker on the dark bridge only; red only as the livery / one rule.
   Loads after blz-native.css + b5-redwood.css 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|verify|invite|choose"] on the root shows one pane (JS flips it).
   Light only (no theme detection). Logical properties only (RTL mirrors; the line art is flipped, never the brothers).
   Contrast (WCAG AA): ink #0B1131 on white 18.44:1 · muted #525A7A on white 6.77:1 · white on the bridge (#0B1131 …
   #1C2470) ≥ 13.67:1, its secondary text #C9CDF0 ≥ 8.77:1 · link #3341C4 on white 7.80: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-canvas);
  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, 57fr) minmax(0, 43fr); grid-template-rows:none; }
}

/* ---------- 3. The bridge (inline-start, the height of the screen; a band below 900px) ---------- */
.blz-login-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 20px 30px;
  color:#FFFFFF;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(51,65,196,.20), transparent 60%),
    linear-gradient(170deg, #121850 0%, var(--b5-rail) 52%, #070B22 100%);
  /* the band's hull: white boot stripe 2px + red waterline 5px on the bottom edge (the curve carries it ≥ 900px) */
  box-shadow:inset 0 -5px 0 var(--b5-accent), inset 0 -7px 0 #FFFFFF;
}
/* a fine grain over the night sky */
.blz-login-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.blz-login-hero > *{ position:relative; z-index:1; flex:none; }

/* the curve into the deck: the canvas, the white boot stripe, the red waterline */
.blz-login-hero > .blz-login-curve{
  position:absolute; z-index:2; inset-block:0; inset-inline-end:-1px; inline-size:150px; block-size:100%;
  pointer-events:none; display:none;
}
.blz-login[dir="rtl"] .blz-login-curve{ transform:scaleX(-1); }
.blz-login-curve-deck{ fill:var(--b5-canvas); }
.blz-login-curve-boot{ fill:none; stroke:#FFFFFF; stroke-width:2.5; }
.blz-login-curve-wl{ fill:none; stroke:var(--b5-accent); stroke-width:5; }

/* the lockup: the yacht on a white tile, "Blitz 5", the product tracked wide */
.blz-login-lockup{ display:flex; align-items:center; gap:14px; }
.blz-login-mark{ flex:none; display:grid; place-items:center; inline-size:46px; block-size:46px; border-radius:10px; background:#FFFFFF; }
.blz-login-mark svg{ inline-size:74%; block-size:74%; }
.blz-login-word{ display:flex; flex-direction:column; min-inline-size:0; }
.blz-native .blz-login-hero-title{ margin:0; font-size:1.75rem; font-weight:700; line-height:1; letter-spacing:-.02em; color:#FFFFFF; }
.blz-login-hero-product{
  margin:8px 0 0; padding-inline-start:2px;
  font-size:.75rem; font-weight:600; line-height:1; letter-spacing:.5em; text-transform:uppercase; color:#C9CDF0;
}
.blz-login[dir="rtl"] .blz-login-hero-product{ letter-spacing:0; font-size:.95rem; }

.blz-login-hero-copy{ display:grid; gap:8px; max-inline-size:34rem; }
.blz-login-hero-tagline{ margin:0; font-size:1.35rem; font-weight:400; line-height:1.2; letter-spacing:-.01em; color:#FFFFFF; text-wrap:balance; }
.blz-login[dir="rtl"] .blz-login-hero-tagline{ letter-spacing:0; line-height:1.4; }
.blz-login-hero-lead{ display:none; margin:0; font-size:.95rem; line-height:1.5; color:#C9CDF0; }
.blz-login-hero-copyright{ display:none; margin:0; font-size:.8rem; color:#C9CDF0; white-space:nowrap; }

/* the ship: the platform in the livery, its decks the modules, the fleet the network (login_ui_pkg.ship_art) */
.blz-login-vessel{ display:none; }
.blz-login-vessel-art{ display:block; inline-size:100%; block-size:100%; max-block-size:420px; overflow:visible; }
.blz-login-hullname{ fill:#FFFFFF; fill-opacity:.85; font-size:9px; font-weight:700; letter-spacing:2.6px; }
.blz-login-water{ stroke:#FFFFFF; stroke-opacity:.10; stroke-width:1; vector-effect:non-scaling-stroke; }
.blz-login-water.is-hi{ stroke:#C9CDF0; stroke-opacity:.28; }
.blz-login-lead{ fill:none; stroke:#FFFFFF; stroke-opacity:.42; stroke-width:1; vector-effect:non-scaling-stroke; }
.blz-login-anc{ fill:var(--b5-rail); stroke:#FFFFFF; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.blz-login-ancd{ fill:#FFFFFF; }
.blz-login-ct{ fill:#FFFFFF; font-size:11px; font-weight:600; letter-spacing:.14em; }
.blz-login-cs{ fill:#C9CDF0; font-size:11.5px; }
.blz-login[dir="rtl"] .blz-login-ct{ letter-spacing:0; font-size:13px; }
.blz-login[dir="rtl"] .blz-login-cs{ font-size:12px; }
.blz-login-contract{
  fill:none; stroke:var(--b5-highlight); stroke-opacity:.55; stroke-width:1; stroke-dasharray:2 5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.blz-login-far{ opacity:.55; }

/* the voyage: one booking in five timed sectors */
.blz-login-voyage{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); column-gap:6px; }
.blz-login-sector{ display:grid; align-content:start; gap:4px; min-inline-size:0; }
.blz-login-sector-bar{ block-size:3px; border-radius:2px; background:rgba(255,255,255,.16); margin-block-end:8px; }
.blz-login-sector-no{ font-size:11px; font-weight:600; letter-spacing:.12em; color:#C9CDF0; font-variant-numeric:tabular-nums; }
.blz-login-sector b{ font-size:.82rem; font-weight:600; line-height:1.2; }
.blz-login-sector small{ display:none; font-size:.78rem; line-height:1.35; color:#C9CDF0; }

/* the B5 Agents: a feature on board, one line */
.blz-login-agents{ display:none; align-items:center; gap:12px; padding-block-start:14px; border-block-start:1px solid rgba(255,255,255,.14); font-size:.85rem; color:#C9CDF0; }
.blz-login-faces{ display:flex; flex:none; }
.blz-login-faces svg{ margin-inline-start:-6px; }
.blz-login-faces svg:first-child{ margin-inline-start:0; }
.blz-login-agents b{ color:#FFFFFF; font-weight:600; }
.blz-login-agents .blz-login-hero-copyright{ margin-inline-start:auto; }

@media (min-width:900px){
  .blz-login-hero{
    position:sticky;
    inset-block-start:0;
    block-size:100vh;
    block-size:100dvh;
    gap:clamp(14px, 2.6vh, 26px);
    padding-block:clamp(24px, 4.5vh, 44px) clamp(20px, 3.5vh, 32px);
    padding-inline:clamp(32px, 4vw, 56px) 150px;
    box-shadow:none;
  }
  .blz-login-hero > .blz-login-curve{ display:block; }
  .blz-login-lockup{ gap:16px; }
  .blz-login-mark{ inline-size:56px; block-size:56px; }
  .blz-native .blz-login-hero-title{ font-size:2.25rem; }
  .blz-login-hero-product{ font-size:.75rem; }
  .blz-login-hero-tagline{ font-size:clamp(1.6rem, 2.3vw, 2.4rem); line-height:1.15; }
  .blz-login-hero-lead{ display:block; }
  .blz-login-vessel{ display:flex; align-items:flex-end; flex:1 1 auto; min-block-size:150px; margin-inline-end:-96px; }
  .blz-login[dir="rtl"] .blz-login-vessel{ margin-inline-end:0; }
  .blz-login-sector b{ font-size:.9rem; }
  .blz-login-sector small{ display:block; }
  .blz-login-agents{ display:flex; }
  .blz-login-hero-copyright{ display:block; }
  /* the staff bridge: lockup and tagline only, the tagline lower down */
  .blz-login[data-blz-login-variant="staff"] .blz-login-hero-copy{ margin-block-start:clamp(40px, 10vh, 110px); }
  .blz-login[data-blz-login-variant="staff"] .blz-login-hero-copyright{ margin-block-start:auto; }
}
/* short screens: everything stays on one screen, the ship takes what is left */
@media (min-width:900px) and (max-height:820px){ .blz-login-sector small{ display:none; } }
@media (min-width:900px) and (max-height:700px){ .blz-login-hero-lead,.blz-login-agents{ display:none; } }

/* the voyage, 12 s a booking: a sector is lit in its window and done after it; the module it touches lights with it */
@media (prefers-reduced-motion:no-preference){
  .blz-login-sector:nth-child(1) .blz-login-sector-bar{ animation:blz-login-sec1 12s infinite; }
  .blz-login-sector:nth-child(2) .blz-login-sector-bar{ animation:blz-login-sec2 12s infinite; }
  .blz-login-sector:nth-child(3) .blz-login-sector-bar{ animation:blz-login-sec3 12s infinite; }
  .blz-login-sector:nth-child(4) .blz-login-sector-bar{ animation:blz-login-sec4 12s infinite; }
  .blz-login-sector:nth-child(5) .blz-login-sector-bar{ animation:blz-login-sec5 12s infinite; }
  .blz-login-m-book .blz-login-ct, .blz-login-m-cus .blz-login-ct,
  .blz-login-m-book .blz-login-ancd, .blz-login-m-cus .blz-login-ancd{ animation:blz-login-lt1 12s infinite; }
  .blz-login-m-ops .blz-login-ct, .blz-login-m-ops .blz-login-ancd{ animation:blz-login-lt23 12s infinite; }
  .blz-login-m-fin .blz-login-ct, .blz-login-m-fin .blz-login-ancd{ animation:blz-login-lt45 12s infinite; }
}
@media (prefers-reduced-motion:reduce){ .blz-login-sector:nth-child(1) .blz-login-sector-bar{ background:var(--b5-highlight); } }
@keyframes blz-login-sec1{ 0%,19.9%{ background:#FFC906; } 20%,99.9%{ background:rgba(255,255,255,.55); } }
@keyframes blz-login-sec2{ 0%,19.9%{ background:rgba(255,255,255,.16); } 20%,39.9%{ background:#FFC906; } 40%,99.9%{ background:rgba(255,255,255,.55); } }
@keyframes blz-login-sec3{ 0%,39.9%{ background:rgba(255,255,255,.16); } 40%,59.9%{ background:#FFC906; } 60%,99.9%{ background:rgba(255,255,255,.55); } }
@keyframes blz-login-sec4{ 0%,59.9%{ background:rgba(255,255,255,.16); } 60%,79.9%{ background:#FFC906; } 80%,99.9%{ background:rgba(255,255,255,.55); } }
@keyframes blz-login-sec5{ 0%,79.9%{ background:rgba(255,255,255,.16); } 80%,99.9%{ background:#FFC906; } }
@keyframes blz-login-lt1{ 0%,19.9%{ fill:#FFC906; } 20%,100%{ fill:#FFFFFF; } }
@keyframes blz-login-lt23{ 0%,19.9%{ fill:#FFFFFF; } 20%,59.9%{ fill:#FFC906; } 60%,100%{ fill:#FFFFFF; } }
@keyframes blz-login-lt45{ 0%,59.9%{ fill:#FFFFFF; } 60%,99.9%{ fill:#FFC906; } 100%{ fill:#FFFFFF; } }

/* Returning visitors get Oracle's quiet sign-in (owner 2026-10-22, "as Oracle would do it"): a browser that remembers
   accounts (the chooser is open, or the sign-in form shows its "Choose an account" link — blz-login.js reveals it only
   then) sees the ship as a still picture under the tagline: no module callouts, no network, no voyage, no agents' words,
   no motion. A first-time visitor sees the annotated ship. Pure CSS on the states the page already has. */
.blz-login[data-blz-login-mode="choose"] .blz-login-hero-lead,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-hero-lead,
.blz-login[data-blz-login-mode="choose"] .blz-login-voyage,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-voyage,
.blz-login[data-blz-login-mode="choose"] .blz-login-faces,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-faces,
.blz-login[data-blz-login-mode="choose"] .blz-login-agents-text,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-agents-text,
.blz-login[data-blz-login-mode="choose"] .blz-login-vessel-art [class^="blz-login-m-"],
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-vessel-art [class^="blz-login-m-"],
.blz-login[data-blz-login-mode="choose"] .blz-login-vessel-art .blz-login-contract,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-vessel-art .blz-login-contract,
.blz-login[data-blz-login-mode="choose"] .blz-login-vessel-art .blz-login-far,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-vessel-art .blz-login-far,
.blz-login[data-blz-login-mode="choose"] .blz-login-vessel-art > text,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-vessel-art > text{ display:none; }
.blz-login[data-blz-login-mode="choose"] .blz-login-agents,
.blz-login:has([data-blz-login-back]:not([hidden])) .blz-login-agents{ border-block-start:0; }

/* ---------- 4. The deck (forms half) ---------- */
.blz-login-main{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-inline-size:0;
  padding:20px 16px max(24px, env(safe-area-inset-bottom));
  background:var(--b5-canvas);
}
.blz-login-main > .blz-login-wm,
.blz-login-main > .blz-login-connections,
.blz-login-main > .blz-login-ship{ position:absolute; z-index:0; pointer-events:none; }
.blz-login-main > .blz-login-wm{
  display:none; inset-block-start:28px; inset-inline-end:36px;
  font-size:clamp(110px, 12vw, 180px); font-weight:700; line-height:1; letter-spacing:-.05em;
  color:var(--b5-primary); opacity:.045; user-select:none;
}
.blz-login-main > .blz-login-connections{
  display:none; inset-block-start:-30px; inset-inline-end:-30px; inline-size:min(520px, 80%); block-size:auto;
}
.blz-login-connections g{ stroke:var(--b5-primary); stroke-opacity:.11; stroke-width:1.25; }
.blz-login-main > .blz-login-ship{ inset-block-end:-24px; inset-inline-end:-32px; inline-size:min(430px, 62%); block-size:auto; }
.blz-login-ship-hull{ stroke:var(--b5-primary); stroke-opacity:.2; stroke-width:1.1; stroke-linejoin:round; }
.blz-login-ship-wl{ stroke:var(--b5-accent); stroke-opacity:.3; stroke-width:1.4; stroke-linejoin:round; }
.blz-login-ship-wake{ stroke:var(--b5-primary); stroke-opacity:.12; stroke-width:1; }
.blz-login[dir="rtl"] .blz-login-connections,
.blz-login[dir="rtl"] .blz-login-ship{ transform:scaleX(-1); }

/* the card: flat, a hairline and 8px corners */
.blz-login-panel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  inline-size:100%;
  max-inline-size:440px;
  margin-inline:auto;
  padding:28px 20px 18px;
  border:1px solid var(--b5-hairline);
  border-radius:8px;
  background:var(--b5-panel);
}
@media (min-width:900px){
  .blz-login-main{ justify-content:center; padding:48px clamp(24px, 4vw, 56px); }
  .blz-login-main > .blz-login-wm,
  .blz-login-main > .blz-login-connections{ display:block; }
  .blz-login-panel{ padding:40px 36px 22px; }
}

/* the second door: the Partners Portal (a row, not a second button) */
.blz-login-or{
  display:flex; align-items:center; gap:14px; margin-block:22px 16px; font-size:.85rem; color:var(--b5-muted);
}
.blz-login-or::before,
.blz-login-or::after{ content:""; flex:1; block-size:1px; background:var(--b5-hairline); }
.blz-login-partner{
  display:grid; grid-template-columns:40px minmax(0, 1fr) 18px; gap:14px; align-items:center;
  padding:12px 14px; border:1px solid var(--b5-hairline); border-radius:6px;
  background:var(--b5-panel); color:var(--b5-ink); text-decoration:none;
}
@media (hover:hover){ .blz-login-partner:hover{ background:var(--b5-hover); border-color:var(--b5-hairline-strong); } }
.blz-login-partner:focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; }
.blz-login-partner-ic{
  display:grid; place-items:center; inline-size:40px; block-size:40px; border-radius:8px;
  background:var(--b5-selected); color:var(--b5-primary);
}
.blz-login-partner-text{ min-inline-size:0; }
.blz-login-partner-text b{ display:block; font-size:.95rem; font-weight:600; }
.blz-login-partner-text small{ display:block; font-size:.85rem; line-height:1.35; color:var(--b5-muted); }
.blz-login-partner-go{ color:var(--b5-link); }
.blz-login[dir="rtl"] .blz-login-partner-go{ transform:scaleX(-1); }

/* 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"],
.blz-login[data-blz-login-mode="verify"] [data-blz-login-pane="verify"],
.blz-login[data-blz-login-mode="invite"] [data-blz-login-pane="invite"]{
  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:end; }
.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; }
/* The email change's confirmation line (#email=, blz-login.js emailLine): the same line, the confirmed look. */
.blz-login-error.is-ok{ border-inline-start-color:var(--b5-success-fill); background:var(--b5-success-soft); color:var(--b5-success); }

/* 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; }
/* Sign in: no progress cursor either — on macOS it is a spinning wheel under the pointer until Home paints */
.blz-native.blz-login .blz-btn.blz-login-submit.is-busy[data-blz-login-submit="signin"]:disabled{ cursor:default; }
.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; }
/* Sign in shows no spinner (the builder's behaviour: the page cross-fades to Home); sign up / verify keep it */
.blz-login-submit.is-busy[data-blz-login-submit="signin"] .blz-login-spinner{ display:none; }
@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;
  margin-block-start:18px;
  padding-block:4px 0;
}
.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; } }

/* ── Verified sign-up (login_ui_pkg 5b mobile + terms, 5c verify pane) ─────── */
.blz-login-phone{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; align-items:start; }
@media (min-width:420px){ .blz-login-phone{ grid-template-columns:minmax(0, 11rem) minmax(0, 1fr); gap:10px; } }

.blz-login-terms{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.92rem; line-height:1.45; color:var(--b5-muted); cursor:pointer;
}
.blz-login-terms input{ flex:none; inline-size:18px; block-size:18px; margin:2px 0 0; accent-color:var(--b5-link); }
.blz-login-terms input:focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; }
.blz-login-terms input[aria-invalid="true"]{ outline:2px solid var(--b5-danger-fill); outline-offset:2px; }
.blz-login-terms a{ color:var(--b5-link); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

.blz-login-code{ display:grid; gap:6px; min-inline-size:0; }
.blz-login-code-label{ font-size:.92rem; font-weight:600; color:var(--b5-ink); }
.blz-login-code .blz-login-hint{ margin:0; overflow-wrap:anywhere; }
.blz-login-code .blz-login-hint.is-warning{ color:var(--b5-warning); font-weight:600; }
.blz-native .blz-input.blz-login-input.blz-login-code-input{
  font-family:Menlo, Consolas, "Courier New", monospace; font-size:1.25rem; letter-spacing:.35em;
}
.blz-native .blz-input.blz-login-input.blz-login-code-input:disabled{ background:var(--b5-surface-2); color:var(--b5-muted); }
.blz-login-code-ok{
  display:none; position:absolute; inset-inline-end:14px; inset-block-start:50%; transform:translateY(-50%);
  color:var(--b5-success); font-weight:700;
}
.blz-login-code.is-verified .blz-login-code-ok{ display:inline; }
.blz-login-code.is-verified .blz-login-hint{ color:var(--b5-success); font-weight:600; }
.blz-login-code-actions{ display:flex; justify-content:space-between; gap:12px; }
.blz-login-code.is-verified .blz-login-code-actions{ visibility:hidden; }
.blz-login-link:disabled{ color:var(--b5-muted); cursor:default; text-decoration:none; }
.blz-login-link:focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; }

/* ── Join (a team invite; login_ui_pkg 5d, org variant only) ───────────────── */
/* The new- / existing-account blocks: [hidden] wins over .blz-login-fields' grid. */
.blz-login-pane[data-blz-login-pane="invite"] [hidden]{ display:none !important; }
/* Join is a sign in: busy without a spinner or the progress (spinning) cursor, like Sign in. */
.blz-login-submit.is-busy[data-blz-login-submit="invite"] .blz-login-spinner{ display:none; }
.blz-native.blz-login .blz-btn.blz-login-submit.is-busy[data-blz-login-submit="invite"]:disabled{ cursor:default; }
/* The fixed email of an existing account; the loading state's disabled fields (INVITE_LOOKUP running). */
.blz-login-pane[data-blz-login-pane="invite"] .blz-input.blz-login-input[readonly]{ background:var(--b5-surface-2); }
.blz-login-pane[data-blz-login-pane="invite"] .blz-input.blz-login-input:disabled{
  background:var(--b5-surface-2); color:var(--b5-disabled); cursor:default;
}
/* The new-account block's username for password managers: in the form, never seen (visually hidden). */
.blz-login-username{
  position:absolute; inline-size:1px; block-size:1px; margin:0; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* The language row while a Join call runs (aria-disabled: no reload under the call). */
.blz-login-lang-btn[aria-disabled="true"]{ color:var(--b5-muted); cursor:default; }
@media (hover:hover){ .blz-login-lang-btn[aria-disabled="true"]:hover{ text-decoration:none; } }

/* ── Account chooser (sign-in v2, plan S1; login_ui_pkg 5e, org variant only; blz-login.js "choose" mode) ─────────────── */
/* "Choose an account" is the first pane when this browser remembers accounts; the sign-in form is today's. Logical
   properties only (RTL mirrors); every name is isolated (<bdi>) and cut with an ellipsis; no copper, no shadow on cards. */
.blz-login[data-blz-login-mode="choose"] [data-blz-login-pane="choose"]{
  display:block;
  animation:blz-login-in var(--blz-dur) var(--blz-ease);
}
.blz-login-cards{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.blz-login-card-item{ position:relative; display:flex; align-items:stretch; gap:6px; min-inline-size:0; }
.blz-native .blz-login-card{
  flex:1;
  min-inline-size:0;
  display:flex;
  align-items:center;
  gap:14px;
  min-block-size:68px;
  padding:12px 14px;
  border:1px solid var(--b5-hairline-strong);
  border-radius:var(--blz-r-card, 6px);
  background:var(--b5-panel);
  color:var(--b5-ink);
  font-size:1rem;
  text-align:start;
  cursor:pointer;
}
@media (hover:hover){ .blz-native .blz-login-card:not(.is-busy):hover{ background:var(--b5-hover); } }
.blz-native .blz-login-card.is-live{ border-color:var(--b5-link); background:var(--b5-selected); }
.blz-native .blz-login-card.is-busy{ opacity:.85; cursor:default; }
.blz-login-card-av{
  flex:none;
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border-radius:50%;
  background:var(--b5-primary);
  color:#FFFFFF;
  font-weight:600;
  font-size:1rem;
  line-height:1;
}
.blz-login-card-text{ flex:1; min-inline-size:0; display:grid; gap:2px; }
.blz-login-card-text bdi{ display:block; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:isolate; }
.blz-login-card-name{ font-weight:600; color:var(--b5-ink); }
.blz-login-card-email,
.blz-login-card-org{ font-size:.9rem; color:var(--b5-muted); }
.blz-login-card-badge{
  flex:none;
  padding:2px 10px;
  border-radius:999px;
  background:var(--b5-success-soft);
  color:var(--b5-success);
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
}
.blz-login-card-more{
  flex:none;
  display:grid;
  place-items:center;
  inline-size:40px;
  border:0;
  border-radius:var(--blz-r-control);
  background:none;
  color:var(--b5-muted);
  cursor:pointer;
}
@media (hover:hover){ .blz-login-card-more:hover{ background:var(--b5-hover); color:var(--b5-ink); } }
.blz-login-card-menu{
  position:absolute;
  inset-block-start:calc(100% - 8px);
  inset-inline-end:0;
  z-index:5;
  min-inline-size:220px;
  padding:4px;
  border:1px solid var(--b5-hairline-strong);
  border-radius:var(--blz-r-input);
  background:var(--b5-panel);
  box-shadow:var(--b5-shadow-over);
}
.blz-login-card-menu[hidden]{ display:none; }
.blz-login-card-remove{
  display:block;
  inline-size:100%;
  min-block-size:40px;
  padding:8px 12px;
  border:0;
  border-radius:var(--blz-r-control);
  background:none;
  color:var(--b5-ink);
  font-size:.95rem;
  text-align:start;
  cursor:pointer;
}
@media (hover:hover){ .blz-login-card-remove:hover{ background:var(--b5-hover); } }
/* The neutral status line (Removed ..., Switching ...), polite; collapses while empty. */
.blz-login-status{ margin:12px 0 0; font-size:.92rem; color:var(--b5-muted); }
.blz-login-status:empty{ margin:0; }
/* The sign-in form's note for a remembered card ("Signing in to Nile Tours"). */
.blz-login-note{
  margin:-12px 0 18px;
  padding:8px 12px;
  border-inline-start:3px solid var(--b5-link);
  border-radius:var(--blz-r-input);
  background:var(--b5-selected);
  color:var(--b5-ink);
  font-size:.92rem;
}
.blz-login-note[hidden]{ display:none; }
.blz-login-switch[hidden]{ display:none; }
/* Phones: the cards run the full width of the page, taller to touch. */
@media (max-width:599.98px){
  .blz-login-cards{ inline-size:100%; }
  .blz-native .blz-login-card{ min-block-size:72px; padding-block:14px; }
  .blz-login-card-more{ inline-size:44px; min-block-size:44px; }
  .blz-login-card-menu{ inset-inline-start:0; inset-inline-end:0; }
  .blz-login-card-remove{ min-block-size:44px; }
}
@media (prefers-reduced-motion:reduce){
  .blz-login[data-blz-login-mode="choose"] [data-blz-login-pane="choose"]{ animation:none !important; }
}

/* ---------- 8. The loading line (owner 2026-10-24: "line allowed on the sign-in page") ---------- */
/* blz-login.js loadLine: from the token hop's form post until the next page arrives. The shell's block (blz-shell.css 13)
   for this page, which loads no shell: 3 px fixed at the very top over everything, a navy track with the white boot
   stripe and the red waterline running inline-start -> inline-end, shown after 300 ms; reduced motion: a still hull
   line. The Sign in button keeps "Signing in..." and no spinner. */
.blz-load{
  position:fixed; inset-inline:0; inset-block-start:0; z-index:11500; block-size:3px; overflow:hidden; pointer-events:none;
  opacity:0; background:var(--b5-primary); contain:layout paint;
}
.blz-load.is-on{ animation:blz-load-in .2s linear .3s forwards; }
.blz-load::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; inline-size:38%;
  background:linear-gradient(90deg, transparent, var(--b5-panel) 18%, var(--b5-panel) 30%, var(--b5-accent) 30%, var(--b5-accent) 100%);
}
.blz-load.is-on::before{ animation:blz-load-run 1.15s cubic-bezier(.4,0,.2,1) infinite; }
.blz-load[dir="rtl"]::before{ background:linear-gradient(270deg, transparent, var(--b5-panel) 18%, var(--b5-panel) 30%, var(--b5-accent) 30%, var(--b5-accent) 100%); }
.blz-load.is-on[dir="rtl"]::before{ animation-name:blz-load-run-rtl; }
@keyframes blz-load-in{ to{ opacity:1; } }
@keyframes blz-load-run{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(265%); } }
@keyframes blz-load-run-rtl{ 0%{ transform:translateX(100%); } 100%{ transform:translateX(-265%); } }
@media (prefers-reduced-motion:reduce){
  .blz-load.is-on::before, .blz-load.is-on[dir="rtl"]::before{ animation:none; inset-inline:0; inline-size:auto;
    background:linear-gradient(var(--b5-primary) 0 55%, var(--b5-panel) 55% 72%, var(--b5-accent) 72%); }
}