/* VENDORED COPY: agent-portal/public/hub-login-b.css. Run resync:vendored. */
/* =========================================================================
   LOGIN TREATMENT B (Hugo 2026-10-07, ruling 17b): one system for the region
   and team logins. Full-bleed place photo, sign-in card aside; on a phone the
   photo is a band above the card, never behind it. Nothing renders over the
   photo but the logo and the top label.
   DESIGNER spec: ~/Documents/Claude/outstanding/region-hub-2026-10/
   SPEC-hub-family-V1.md sections 2, 3 and 7.

   SHARED FILE. public/region.html and public/team.html both link it, and the
   region hub V1 PR and the team login PR each add this exact file, so keep
   the two copies byte-identical until both have merged.

   Hooks: .hub-login-b[data-card-side="left"|"right"], .is-team (longer
   names, a 40px heading), and the custom properties --focal, --zoom,
   --band-focal, --band-zoom and --hlb-card-cap (a narrower card) set from
   config by the page.
   ========================================================================= */

html.is-hub-login-b {
  background: #f4f2ee;
}

/* ---- Login, treatment B --------------------------------------------------
   Full-bleed place photo, sign-in card aside. The photo's framing is two
   numbers per breakpoint, set as custom properties from config:
   --focal is the object-position AND the transform-origin of --zoom, so
   zooming about a right-hand focal pulls the subject out from under a right
   card. Nothing renders over the photo but the logo and the top label. */
.hub-login-b {
  --hlb-card-w: 440px;
  --hlb-gutter: 48px;
  background: var(--page);
}

.hub-login-b .hlb-mbar {
  display: none;
}

.hub-login-b .hlb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  background: #1b1b1b;
}

.hub-login-b .hlb-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.hub-login-b .hlb-photo picture {
  display: contents;
}

.hub-login-b .hlb-bg {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal, 50% 50%);
}

/* Light veils only: top 16%, bottom 12%, and 44% on the card's side. */
.hub-login-b .hlb-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.38) 0%, rgba(10, 10, 10, 0) 16%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.32) 0%, rgba(10, 10, 10, 0) 12%),
    linear-gradient(270deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.1) 30%, rgba(10, 10, 10, 0) 44%);
}

.hub-login-b[data-card-side="left"] .hlb-shade {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.38) 0%, rgba(10, 10, 10, 0) 16%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.32) 0%, rgba(10, 10, 10, 0) 12%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.1) 30%, rgba(10, 10, 10, 0) 44%);
}

.hub-login-b .hlb-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px var(--hlb-gutter);
}

.hub-login-b .hlb-logo {
  width: auto;
  height: 44px;
}

.hub-login-b .hlb-bar span {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: right;
  text-transform: uppercase;
  opacity: 0.92;
}

.hub-login-b .hlb-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px var(--hlb-gutter) 64px;
}

.hub-login-b[data-card-side="left"] .hlb-wrap {
  justify-content: flex-start;
}

.hub-login-b .hlb-card {
  width: min(var(--hlb-card-w), var(--hlb-card-cap, 100%), 100%);
  padding: 40px 40px 32px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.hub-login-b .hlb-kick {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hub-login-b .hlb-card h1 {
  margin: 14px 0;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.hub-login-b .hlb-lede {
  margin-bottom: 24px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.hub-login-b .login-form {
  gap: 0;
  margin-top: 0;
}

.hub-login-b .field label {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.hub-login-b .field input {
  min-height: 50px;
  border-radius: 10px;
  font-size: 15px;
  padding: 14px 16px;
}

.hub-login-b .login-form button {
  width: 100%;
  min-height: 0;
  margin-top: 14px;
  padding: 15px 20px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  white-space: normal;
}

.hub-login-b .notice {
  min-height: 0;
  margin-top: 10px;
}

.hub-login-b .notice:empty {
  display: none;
}

.hub-login-b .hlb-inside {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.hub-login-b + .footer {
  width: 100%;
  margin: 0;
  padding: 28px var(--space-6);
  background: var(--page);
}

@media (max-width: 1100px) {
  .hub-login-b {
    --hlb-card-w: 420px;
    --hlb-gutter: 36px;
  }
}

/* Phone: logo bar on the page ground, the photo as a 280px band, the card
   below it (never on it). No veils, no label. */
@media (max-width: 860px) {
  .hub-login-b .hlb-mbar {
    display: flex;
    align-items: center;
    padding: 16px 16px 14px;
  }

  .hub-login-b .hlb-mbar .hlb-logo {
    height: 36px;
  }

  .hub-login-b .hlb-stage {
    min-height: 0;
    overflow: visible;
    background: var(--page);
  }

  .hub-login-b .hlb-photo {
    position: relative;
    inset: auto;
    height: 280px;
  }

  .hub-login-b .hlb-bg {
    object-position: var(--band-focal, 50% 50%);
    transform: scale(var(--band-zoom, 1));
    transform-origin: var(--band-focal, 50% 50%);
  }

  .hub-login-b .hlb-shade,
  .hub-login-b .hlb-bar {
    display: none;
  }

  .hub-login-b .hlb-wrap,
  .hub-login-b[data-card-side="left"] .hlb-wrap {
    justify-content: stretch;
    padding: 16px 16px 0;
  }

  .hub-login-b .hlb-card {
    width: 100%;
    padding: 28px 22px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
  }

  .hub-login-b .hlb-card h1 {
    font-size: 36px;
  }

  .hub-login-b + .footer {
    padding: 24px 16px;
  }
}

/* Team names run long ("Carey Hagglund Condy Team"): a 40px heading. */
.hub-login-b.is-team .hlb-card h1 {
  font-size: 40px;
  line-height: 1.04;
}

@media (max-width: 860px) {
  .hub-login-b.is-team .hlb-card h1 {
    font-size: 34px;
  }
}

/* r11-06: existing Hub utility family, also consumed by staff and solo intake.
   Scoped tokens leave region/team login B and its photo framing unchanged. */
.hub-family {
  --hf-page: #F4F2EE;
  --hf-panel: #FFFFFF;
  --hf-ink: #0A0A0A;
  --hf-soft: #3D3D3D;
  --hf-muted: #737373;
  --hf-line: #E5E5E5;
  --hf-accent: #4F06EB;
  --hf-live: #CFFF5E;
  --hf-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --hf-body: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
  background-color: var(--hf-page);
  color: var(--hf-ink);
  font-family: var(--hf-body);
}
.hub-family.ma-roster {
  --bg:var(--hf-page); --bg-2:var(--hf-page); --panel:var(--hf-panel);
  --card:var(--hf-panel); --card-h:var(--hf-page); --sheet:var(--hf-panel);
  --line:var(--hf-line); --line-2:#BEB9B0; --line-3:var(--hf-muted);
  --fg:var(--hf-ink); --fg-2:var(--hf-soft); --mut:var(--hf-muted); --mut-2:var(--hf-muted);
  --lime:var(--hf-accent); --violet:var(--hf-accent); --warm:#8A1C1C;
  --disp:var(--hf-display); --sans:var(--hf-body);
}
  /* r11-06/07: the solo task belongs to the shipped Hub family. The MA
     roster keeps its own renderer; no auth or intake state comes from CSS. */
  .hub-family.is-solo .topbar .mark img { display:block; width:auto; height:32px; }
  body.hub-family.is-solo { background-image:none; padding:24px; }
  .hub-family.is-solo .app { max-width:1080px; border:0; box-shadow:none; overflow:visible; }
  .hub-family.is-solo .topbar { background:transparent; gap:20px; }
  .hub-family.is-solo .topbar .mark { padding:0 20px 0 0; border:0; }
  .hub-family.is-solo .desk-main { padding:32px 0 48px; }
  .hub-family.is-solo .hero { border-radius:18px; margin-bottom:28px; }
  .hub-family.is-solo .hero img { height:220px; }
  .hub-family.is-solo .page-head { border:0; padding-bottom:8px; }
  .hub-family.is-solo .page-head h1 { line-height:1.08; font-size:clamp(34px,4vw,48px); }
  .hub-family.is-solo .eyebrow { color:var(--ink-soft); }
  .hub-family.is-solo .card { border-radius:18px; overflow:hidden; }
  .hub-family.is-solo #soloCard { max-width:800px; margin:28px auto 0; }
  .hub-family.is-solo .card-head { padding:28px 32px 22px; }
  .hub-family.is-solo .card-body { padding:28px 32px 32px; }
  .hub-family.is-solo .card-head h2 { font-size:26px; }
  .hub-family.is-solo .card-head .sub { color:var(--ink-soft); font-size:14px; }
  .hub-family.is-solo #soloStepCount { margin:0 0 10px; color:var(--ink-soft); font-size:13px; }
  .hub-family.is-solo #soloStepProgress { display:block; width:100%; height:5px; margin:0 0 26px; border:0; border-radius:3px; overflow:hidden; appearance:none; background:var(--line); accent-color:var(--ink); }
  .hub-family.is-solo #soloStepProgress::-webkit-progress-bar { background:var(--line); }
  .hub-family.is-solo #soloStepProgress::-webkit-progress-value { background:var(--ink); }
  .hub-family.is-solo #soloStepProgress::-moz-progress-bar { background:var(--ink); }
  .hub-family.is-solo #soloStepTitle { font-size:30px; line-height:1.18; margin:0 0 28px; }
  .hub-family.is-solo .row.identity { align-items:start; }
  .hub-family.is-solo .field { align-content:start; gap:8px; }
  .hub-family.is-solo .field-label { font-size:12px; letter-spacing:.04em; text-transform:none; }
  .hub-family.is-solo .field input,.hub-family.is-solo .type-choice,.hub-family.is-solo textarea { min-height:50px; border-radius:10px; font-size:16px; padding:12px 14px; }
  .hub-family.is-solo .field-note { font-size:13px; line-height:1.5; }
  .hub-family.is-solo .solo-ad-card { background:var(--surface); border:0; padding:0; }
  .hub-family.is-solo .solo-ad-head { margin-bottom:16px; }
  .hub-family.is-solo .btn { border-radius:999px; min-height:48px; font-size:14px; letter-spacing:0; text-transform:none; padding:12px 24px; white-space:normal; }
  .hub-family.is-solo .solo-step-nav { padding-top:24px; border-top:1px solid var(--line); }
  .hub-family.is-solo .solo-summary { margin-top:24px; }
  .hub-family.is-solo .notice { border-radius:12px; }
  @media (max-width:860px) {
    body.hub-family.is-solo { padding:0 16px; }
    .hub-family.is-solo .app { min-height:100vh; }
    .hub-family.is-solo .topbar .mark { padding-right:0; }
    .hub-family.is-solo .crumb { white-space:normal; padding-right:0; }
    .hub-family.is-solo .desk-main { padding:24px 0 32px; }
    .hub-family.is-solo .hero img { height:180px; }
    .hub-family.is-solo .card-head,.hub-family.is-solo .card-body { padding:24px 20px; }
    .hub-family.is-solo #soloStepTitle { font-size:26px; }
    .hub-family.is-solo .solo-step-nav { flex-direction:column; gap:10px; }
    .hub-family.is-solo .solo-step-nav .btn { width:100%; }
  }