/* ============================================================
   RosterCap V2.76 — Block-based signed-out landing
   FILE: css/assets-landing.css
   Scope: #authGate only

   Corrections:
   - signed-out landing now fully respects .hidden after authentication
   - prevents authGate and My Front Offices from appearing together
   - keeps the block-based landing layout
   - removes the extra white Google-button shell
   - designed to pair with data.js using:
       theme: 'outline_dark'
       shape: 'pill'
   ============================================================ */

/* --------------------------------------------------------------------------
   Critical surface visibility
   -------------------------------------------------------------------------- */

#authGate.landing-shell-v275.hidden,
#officePicker.hidden,
#onboarding.hidden,
#workspace.hidden {
  display:none !important;
}

/* Only apply the landing grid while the auth gate is actually visible. */
#authGate.landing-shell-v275:not(.hidden) {
  width:min(980px,calc(100% - 24px)) !important;
  margin:24px auto 28px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(290px,.72fr) !important;
  grid-template-areas:
    "hero signin"
    "features signin";
  gap:12px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   Hero / brand
   -------------------------------------------------------------------------- */

#authGate .landing-hero-v275 {
  grid-area:hero;
  padding:28px 30px 26px !important;
  border:1px solid rgba(119,201,255,.16) !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 8% 0%,rgba(50,173,255,.14),transparent 40%),
    linear-gradient(145deg,rgba(13,26,37,.98),rgba(8,18,27,.98)) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.15) !important;
}

#authGate .landing-brand-row-v243 {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  margin:0 0 22px !important;
}

#authGate .landing-brand-mark-v243 {
  flex:0 0 68px !important;
  width:68px !important;
  height:68px !important;
  margin:0 !important;
  border-radius:17px !important;
}

#authGate .landing-brand-mark-v243 img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

#authGate .landing-brand-copy-v243 {
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:5px !important;
}

#authGate .landing-wordmark-v243 {
  margin:0 !important;
  font-size:1.95rem !important;
  line-height:.95 !important;
  white-space:nowrap;
}

#authGate .landing-brand-subtitle-v243 {
  margin:0 !important;
  font-size:.71rem !important;
  line-height:1.1 !important;
  white-space:nowrap;
}

#authGate .landing-kicker {
  color:#82CBFA !important;
  font-size:.63rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  line-height:1.35 !important;
}

#authGate .landing-hero-v275 h2 {
  max-width:620px;
  margin:10px 0 12px !important;
  font-size:clamp(2.15rem,5.4vw,3.75rem) !important;
  line-height:1 !important;
  letter-spacing:-.05em !important;
}

#authGate .landing-hero-v275 .landing-lead {
  max-width:620px;
  margin:0 !important;
  color:#A6B6C4 !important;
  font-size:.92rem !important;
  line-height:1.58 !important;
}

/* --------------------------------------------------------------------------
   Feature block
   -------------------------------------------------------------------------- */

#authGate .landing-feature-panel-v275 {
  grid-area:features;
  padding:12px !important;
  border:1px solid rgba(119,201,255,.14);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(11,23,33,.94),rgba(7,17,25,.94));
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

#authGate .landing-feature-panel-v275 > .eyebrow {
  margin:2px 3px 10px !important;
  color:#7DC6F7 !important;
  font-size:.60rem !important;
  letter-spacing:.13em !important;
}

#authGate .landing-feature-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 !important;
}

#authGate .landing-feature {
  min-width:0 !important;
  min-height:92px !important;
  display:flex !important;
  align-items:flex-start !important;
  padding:13px 14px !important;
  border:1px solid rgba(119,201,255,.12) !important;
  border-radius:13px !important;
  background:linear-gradient(145deg,rgba(9,21,31,.98),rgba(7,16,24,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
}

#authGate .landing-feature > span {
  display:block !important;
  min-width:0;
}

#authGate .landing-feature-icon {
  display:none !important;
}

#authGate .landing-feature strong {
  display:block !important;
  color:#EFF5FA !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
}

#authGate .landing-feature small {
  display:block !important;
  margin-top:6px !important;
  color:#879AA9 !important;
  font-size:.64rem !important;
  line-height:1.42 !important;
}

/* --------------------------------------------------------------------------
   Sign-in block
   -------------------------------------------------------------------------- */

#authGate .landing-signin-card-v275 {
  grid-area:signin;
  align-self:stretch;
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:28px 24px !important;
  border:1px solid rgba(119,201,255,.16) !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(50,173,255,.08),transparent 38%),
    linear-gradient(180deg,rgba(10,21,30,.98),rgba(7,16,24,.98)) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.15) !important;
}

#authGate .landing-signin-card-v275::before {
  display:none !important;
}

#authGate .landing-signin-card-v275 .eyebrow {
  margin:0 0 8px !important;
  color:#7DC6F7 !important;
  font-size:.62rem !important;
  letter-spacing:.13em !important;
}

#authGate .landing-signin-card-v275 h3 {
  max-width:340px;
  margin:0 0 10px !important;
  font-size:1.42rem !important;
  line-height:1.14 !important;
  letter-spacing:-.03em !important;
}

#authGate .landing-signin-card-v275 > p:not(.eyebrow) {
  max-width:350px;
  margin:0 0 18px !important;
  color:#9DAEBC !important;
  font-size:.80rem !important;
  line-height:1.52 !important;
}

/* --------------------------------------------------------------------------
   Google Identity Services
   --------------------------------------------------------------------------

   The visible button is rendered by Google inside an iframe, so RosterCap
   should not create a second border, white shell, or fake button around it.

   Pair with data.js:
     theme: 'outline_dark'
     shape: 'pill'
   -------------------------------------------------------------------------- */

#authGate .google-identity-wrap {
  width:100% !important;
  max-width:400px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:999px !important;
  background:#131314 !important;
  box-shadow:none !important;
}

#authGate #googleSignInButton,
#authGate #googleSignInButton > div {
  width:100% !important;
  max-width:400px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:999px !important;
  background:#131314 !important;
  box-shadow:none !important;
}

#authGate #googleSignInButton iframe {
  display:block !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   Security note
   -------------------------------------------------------------------------- */

#authGate .landing-security {
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  margin-top:13px !important;
  padding:10px 11px !important;
  border:1px solid rgba(119,201,255,.10) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.018) !important;
  color:#7F929F !important;
  font-size:.62rem !important;
  line-height:1.42 !important;
}

#authGate .landing-security .security-dot {
  flex:0 0 auto;
  margin-top:3px !important;
}

#appHeader.hidden + main #authGate.landing-shell-v275:not(.hidden) {
  margin-top:18px !important;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width:760px) {
  #authGate.landing-shell-v275:not(.hidden) {
    width:calc(100% - 20px) !important;
    margin:8px auto 18px !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "hero"
      "features"
      "signin" !important;
    gap:9px !important;
  }

  #appHeader.hidden + main #authGate.landing-shell-v275:not(.hidden) {
    margin-top:6px !important;
  }

  #authGate .landing-hero-v275 {
    padding:20px 17px 19px !important;
    border-radius:17px !important;
  }

  #authGate .landing-brand-row-v243 {
    gap:12px !important;
    margin-bottom:18px !important;
  }

  #authGate .landing-brand-mark-v243 {
    flex-basis:60px !important;
    width:60px !important;
    height:60px !important;
    border-radius:15px !important;
  }

  #authGate .landing-wordmark-v243 {
    font-size:1.65rem !important;
  }

  #authGate .landing-brand-subtitle-v243 {
    font-size:.64rem !important;
  }

  #authGate .landing-kicker {
    font-size:.57rem !important;
    letter-spacing:.105em !important;
  }

  #authGate .landing-hero-v275 h2 {
    margin:9px 0 10px !important;
    font-size:2.05rem !important;
    line-height:1.025 !important;
  }

  #authGate .landing-hero-v275 .landing-lead {
    font-size:.80rem !important;
    line-height:1.5 !important;
  }

  #authGate .landing-feature-panel-v275 {
    padding:9px !important;
    border-radius:16px !important;
  }

  #authGate .landing-feature-panel-v275 > .eyebrow {
    margin:2px 2px 8px !important;
    font-size:.57rem !important;
  }

  #authGate .landing-feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #authGate .landing-feature {
    min-height:98px !important;
    padding:11px 12px !important;
    border-radius:12px !important;
  }

  #authGate .landing-feature strong {
    font-size:.72rem !important;
  }

  #authGate .landing-feature small {
    margin-top:5px !important;
    font-size:.59rem !important;
    line-height:1.38 !important;
  }

  #authGate .landing-signin-card-v275 {
    padding:19px 17px !important;
    border-radius:17px !important;
  }

  #authGate .landing-signin-card-v275 h3 {
    max-width:none;
    font-size:1.18rem !important;
  }

  #authGate .landing-signin-card-v275 > p:not(.eyebrow) {
    max-width:none;
    margin-bottom:15px !important;
    font-size:.75rem !important;
    line-height:1.48 !important;
  }

  #authGate .google-identity-wrap,
  #authGate #googleSignInButton,
  #authGate #googleSignInButton > div {
    max-width:none !important;
  }

  #authGate .landing-security {
    margin-top:10px !important;
    padding:9px 10px !important;
    font-size:.58rem !important;
  }
}

@media (max-width:360px) {
  #authGate .landing-brand-mark-v243 {
    flex-basis:55px !important;
    width:55px !important;
    height:55px !important;
  }

  #authGate .landing-wordmark-v243 {
    font-size:1.50rem !important;
  }

  #authGate .landing-brand-subtitle-v243 {
    font-size:.59rem !important;
  }

  #authGate .landing-hero-v275 h2 {
    font-size:1.88rem !important;
  }

  #authGate .landing-feature-grid {
    grid-template-columns:1fr !important;
  }

  #authGate .landing-feature {
    min-height:0 !important;
  }
}