/* C5-B1 — client AUTH surface (login) in Direction B over the USER_APPROVED Hero Algérie
   (app/static/c4/foundation/assets/hero_algerie.webp, shared file untouched). Loaded ONLY by app/client_auth_ui.py, after
   direction_b.css (fonts, --b-* tokens scoped to [data-c5b-screen] = the login card, b-btn). Every rule is scoped to
   body[data-c5b-auth]; no token is redefined; the 156 px Hero geometry is NOT used (full-viewport background instead). */

body[data-c5b-auth] { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: #12284a;
  background-image: url("assets/hero_algerie.webp"); background-repeat: no-repeat; background-size: cover; background-position: 70% 50%;
  font: 400 14px/1.5 'B Public Sans', 'Inter', system-ui, sans-serif; color: #1b2430; -webkit-font-smoothing: antialiased; }
body[data-c5b-auth] *, body[data-c5b-auth] *::before, body[data-c5b-auth] *::after { box-sizing: border-box; }
/* marine overlay: solid behind the card (left), opening towards the Monument / crane / bay (right) */
body[data-c5b-auth] .b-auth-scrim { position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 40, 74, .94) 0%, rgba(18, 40, 74, .86) min(38%, 640px), rgba(18, 40, 74, .42) 64%, rgba(18, 40, 74, .10) 100%),
              linear-gradient(0deg, rgba(18, 40, 74, .55) 0%, rgba(18, 40, 74, 0) 22%); }
body[data-c5b-auth] .b-auth { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; min-height: 100vh; min-height: 100dvh;
  padding: clamp(20px, 3.4vw, 48px) clamp(16px, 6.5vw, 120px); }
body[data-c5b-auth] .b-auth-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
body[data-c5b-auth] .b-auth-brand img { width: 44px; height: 44px; border-radius: 10px; }
body[data-c5b-auth] .b-auth-brand strong { display: block; font: 600 20px/1.2 'B Newsreader', Georgia, serif; letter-spacing: -.1px; color: #fff; }
body[data-c5b-auth] .b-auth-brand span { display: block; font: 400 13px/1.35 'B Public Sans', Inter, sans-serif; color: #dbe3ee; }

/* the card carries data-c5b-screen for the Direction B tokens + buttons; its screen-level frame is reset here */
body[data-c5b-auth] .b-auth-card[data-c5b-screen] { align-self: center; justify-self: start; width: min(420px, 100%); margin: 0; padding: 32px 36px 30px;
  border-top: 3px solid var(--b-ochre-line); border-radius: var(--b-r-card); background: var(--b-surface); color: var(--b-text-2);
  box-shadow: 0 1px 2px rgba(18, 40, 74, .10), 0 24px 64px rgba(6, 18, 36, .38); }
body[data-c5b-auth] .b-auth-kicker { display: block; font: 600 12px/1.3 var(--b-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--b-ochre); }
body[data-c5b-auth] .b-auth-card h1 { margin: 6px 0 4px; font: 600 32px/1.15 var(--b-serif); letter-spacing: -.3px; color: var(--b-text); }
body[data-c5b-auth] .b-auth-lede { margin: 0 0 22px; font: 400 14.5px/1.5 var(--b-sans); color: var(--b-muted); }
body[data-c5b-auth] .b-auth-field { display: grid; gap: 6px; margin: 0 0 16px; }
body[data-c5b-auth] .b-auth-field label { font: 600 13px/1.3 var(--b-sans); color: var(--b-text); }
body[data-c5b-auth] .b-auth-field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #c9cec8; border-radius: var(--b-r-ctl);
  background: var(--b-surface); color: var(--b-text); font: 400 15px/1 var(--b-sans); box-shadow: none; }
body[data-c5b-auth] .b-auth-field input:focus { border-color: var(--b-marine-2); outline: 2px solid rgba(30, 58, 99, .20); outline-offset: 0; }
body[data-c5b-auth] .b-auth-card .b-auth-submit { width: 100%; height: 46px; margin-top: 8px; font-size: 15px; }
body[data-c5b-auth] .b-auth-card .b-auth-submit:focus-visible { outline: 2px solid var(--b-ochre-line); outline-offset: 2px; }
body[data-c5b-auth] .b-auth-card .b-auth-submit[aria-busy="true"] { opacity: .75; cursor: progress; }
body[data-c5b-auth] #error { min-height: 20px; margin-top: 12px; font: 600 13px/1.45 var(--b-sans); color: var(--b-risk); }
body[data-c5b-auth] #error:not(:empty) { padding: 9px 12px; border-left: 3px solid var(--b-risk); border-radius: 6px; background: var(--b-risk-soft); }
body[data-c5b-auth] .b-auth-foot { font: 400 12.5px/1.4 'B Public Sans', Inter, sans-serif; color: #b9c7da; }

@media (max-width: 720px) {
  body[data-c5b-auth] { background-position: 74% 40%; }
  body[data-c5b-auth] .b-auth-scrim { background: linear-gradient(180deg, rgba(18, 40, 74, .90) 0%, rgba(18, 40, 74, .62) 45%, rgba(18, 40, 74, .88) 100%); }
  body[data-c5b-auth] .b-auth { gap: 18px; }
  body[data-c5b-auth] .b-auth-card[data-c5b-screen] { justify-self: stretch; width: 100%; max-width: 440px; margin: 0 auto; padding: 26px 22px 24px; }
  body[data-c5b-auth] .b-auth-card h1 { font-size: 28px; }
}
@media (max-height: 700px) and (min-width: 721px) {
  body[data-c5b-auth] .b-auth { gap: 14px; }
  body[data-c5b-auth] .b-auth-card[data-c5b-screen] { padding: 24px 32px 22px; }
}