/* Baab v26 - cover sits BEHIND the app (blended, softly blurred); original
   cream logo card restored; Scope upload menu always on top. */

/* 1) Cover as a fixed backdrop: soft blur, dimmed, faded into the dark theme. */
body { background-color: #05060d; }
/* The cover is a true BACKGROUND: one fixed layer behind everything, cropped to fill any window
   (wide, short or phone), only a hair of blur, blended into the dark theme by the gradient layer
   below. It cannot be clicked and is never inside a panel. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("/brand/baab-cover-bg.jpg") center 40% / cover no-repeat;
  filter: blur(.6px) saturate(1.08);
  opacity: .5;
}
@media (max-width: 640px) { body::before { background-position: 50% 30%; } }
/* Layer 3: gentle darkening so every panel and word stays readable. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(5,6,13,0) 0%, rgba(5,6,13,.38) 62%, rgba(5,6,13,.78) 100%),
    linear-gradient(180deg, rgba(5,6,13,.18) 0%, rgba(5,6,13,.55) 100%);
}
/* panels stay readable on top of the picture */
.glass-panel, .glass-sheet, #scopeWorkspace { background-color: rgba(10, 14, 30, .5) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* 2) The cover is no longer pasted into the Scope workspace. */
.scope-empty-state .cover-card { display: none !important; }

/* 3) Scope "+" menu: the command panel gets its own top layer, so later glass
      panels (which also create layers) can never paint over the menu. */
.scope-top { position: relative; z-index: 40; }
#scopeUploadMenu { z-index: 90 !important; }

/* 4) Original logo: the cream BAAB card, cropped to the gold mark in small
      spots, shown in full where there is room. */
img.baab-brand-mark {
  object-fit: cover !important; object-position: 50% 30%;
  padding: 0 !important; background: #f6f1e4 !important;
  border: 1px solid rgba(214,169,90,.55) !important; border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) !important;
}
img.gateway-logo { width: 96px !important; height: 96px !important; }
img.baab-brand-mark{max-width:7.5rem}

/* v28: the Scope command panel must not clip its "+" menu, and the menu must be
   above the cards that follow it. */
.scope-command-shell { overflow: visible !important; z-index: 30; border-radius: 1rem; }
.scope-command-shell:after { border-radius: 1rem; }
#scopeStatusCard, .scope-status-card { position: relative; z-index: 1; }
#scopeUploadMenu { z-index: 120 !important; background: rgba(8,12,28,.97) !important; }
/* the cover is not needed inside Scope (camera / workspace) */
body[data-tab="scope"]::before { opacity: .38 !important; }
body[data-tab="scope"]::after { background: rgba(5,6,13,.55); }

/* ===== v29: first screen. The cover fills the WHOLE window as the background (cropped with
   `cover`, so it adapts to wide, short and phone windows); logo + welcome sit on top, always fully
   visible; very short windows scroll instead of cropping anything. ===== */
.gateway{
  background:
    radial-gradient(90% 80% at 50% 45%, rgba(5,6,13,.15) 0%, rgba(5,6,13,.62) 70%, rgba(5,6,13,.88) 100%),
    linear-gradient(180deg, rgba(5,6,13,.25), rgba(5,6,13,.55)),
    url("/brand/baab-cover-bg.jpg") center 40% / cover no-repeat, #05060d !important;
  align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.gateway-card{margin:auto; padding:clamp(12px,4dvh,40px) 0; display:flex; flex-direction:column; align-items:center; text-align:center}
img.gateway-logo{position:static !important; transform:none !important; width:auto !important; height:auto !important;
  max-width:min(48vw,150px); max-height:34dvh; object-fit:contain !important; object-position:center !important;
  background:#f6f1e4 !important; padding:0 !important; border:1px solid rgba(214,169,90,.6) !important; border-radius:18px !important;
  box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08) !important}
.gateway-line{margin-top:22px !important; text-shadow:0 2px 14px rgba(0,0,0,.85); font-weight:600}
.gateway-hint{text-shadow:0 1px 8px rgba(0,0,0,.9); color:rgba(255,255,255,.7) !important}
.gateway-btn{margin-top:20px !important}
@media (max-height:520px){ img.gateway-logo{max-height:26dvh} .gateway-line{margin-top:12px !important;font-size:15px} .gateway-btn{margin-top:12px !important;min-height:48px !important} }