/* ============================================================================
   SIGNED-OUT PORTAL PREVIEW - REPLICA OF THE REAL PARTNER PAGES
   ----------------------------------------------------------------------------
   Added 12 Aug 2026.

   Styles the six page replicas that src/signed-out-sidebar.jsx renders behind
   the lock card on the signed-out portal rail: Home, Opportunities, My
   Projects, Referrals, Earnings, Profile.

   These are traced from the real partner portal, aonslow/gogorilla-platform,
   which serves /partners as a rewrite of /account. Copy, tab labels, fixture
   data and the type scale are taken from that source so the preview reads as
   the actual product rather than a wireframe of it. Nothing here fetches or
   renders real user data: every figure is the portal's own fixture or its
   documented zero state.

   Tokens lifted from the platform, keep them in step if it changes:
     page             #efede7 warm paper
     glass pane       rgba(255,255,255,0.55), radius 18px, no border
     brand blue       #002abf   (eyebrows use --color-brand #06079c)
     primary gradient linear-gradient(109deg,#2e5dff,#002abf 60%,#001b82)
     orange gradient  linear-gradient(109deg,#ff962e,#bf6000 60%,#824100)
     success green    #0f8847
     h1               1.875rem/700   eyebrow .6875rem/700 uppercase .1em
     body             .8125rem        fine print .6875rem

   WHY REAL TEXT
   An earlier revision drew grey bars. Blurred, bars read as a loading state,
   because that is what they are. Real strings at real sizes give the ragged
   line lengths and the type rhythm of a populated page, which is what makes
   6px of blur read as a real screen behind glass. The text is not meant to be
   legible through the blur, it is meant to be shaped like text.

   ACCESSIBILITY
   The JSX wraps all of this in aria-hidden, so none of this copy reaches a
   screen reader. The glimpse itself is the labelled dialog.
   ========================================================================= */

.gg-scope .sp-root{ display: contents; }

/* The rail's own tab strip is hidden for these pages; each replica draws its
   own, because the real tab labels and the neumorphic pill treatment are part
   of what makes the page recognisable, and Home has no tab strip at all. */
.gg-scope .gg-sos__blur:has(.sp) .gg-sos__sk-tabs{ display: none; }

.gg-scope .gg-sos__blur:has(.sp){
  display: block;
  padding: 72px 3vw 3vw;
  overflow: hidden;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.gg-scope .sp{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  font-family: var(--gg-font, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: #0f172a;
  --sp-slate7: #334155;
  --sp-slate6: #475569;
  --sp-slate5: #64748b;
  --sp-slate4: #94a3b8;
  --sp-edge: rgba(15, 28, 53, 0.09);
  --sp-brand: #06079c;
  --sp-blue: #002abf;
}
.gg-scope .sp *{ box-sizing: border-box; }

/* Glass pane. The real one carries a nine-slice bevel on ::before; behind 6px
   of blur that detail is invisible, so a plain edge and the same shadow stack
   is indistinguishable and far cheaper. */
.gg-scope .sp__pane{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem 1.25rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
              0 1px 2px rgba(15,23,42,0.05),
              0 18px 36px -18px rgba(44,51,102,0.2);
}
/* Nested pane: solid rather than translucent, as in the real cards. */
.gg-scope .sp__pane--in{
  background: rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,23,42,0.05);
}

/* ── Type ────────────────────────────────────────────────────────────────── */
.gg-scope .sp__h1{ font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.gg-scope .sp__h1--hero{ font-size: 1.6rem; white-space: normal; }
.gg-scope .sp__h2{ font-size: 0.8125rem; font-weight: 700; }
.gg-scope .sp__eyebrow{ font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sp-brand); }
.gg-scope .sp__eyebrow--am{ color: #92400e; }
.gg-scope .sp__eyebrow--b{ color: var(--sp-blue); letter-spacing: 0.06em; }
.gg-scope .sp__tt{ font-size: 0.8125rem; font-weight: 600; }
.gg-scope .sp__tt--lg{ font-size: 0.9rem; font-weight: 700; }
.gg-scope .sp__tt2{ font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.gg-scope .sp__cardt{ font-size: 0.8125rem; font-weight: 500; color: var(--sp-slate5); }
.gg-scope .sp__ts{ font-size: 0.75rem; line-height: 1.45; color: var(--sp-slate6); }
.gg-scope .sp__ts--mut{ color: var(--sp-slate5); }
.gg-scope .sp__ts--r{ text-align: right; white-space: nowrap; }
.gg-scope .sp__meta{ font-size: 0.6875rem; font-weight: 600; color: var(--sp-slate5); white-space: nowrap; }
.gg-scope .sp__cap{ font-size: 0.75rem; line-height: 1.35; color: var(--sp-slate6); }
.gg-scope .sp__fine{ font-size: 0.6875rem; line-height: 1.4; color: var(--sp-slate4); }
.gg-scope .sp__link{ font-size: 0.75rem; font-weight: 500; color: #1d4ed8; white-space: nowrap; }
.gg-scope .sp__fig{ font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.gg-scope .sp__fig--rail{ font-size: 2rem; }
.gg-scope .sp__fig--ok{ color: #0f8847; }
.gg-scope .sp__figsuf{ font-size: 0.8125rem; font-weight: 600; color: var(--sp-slate6); }
.gg-scope .sp__figrow{ display: flex; align-items: baseline; gap: 0.4rem; }

/* ── Controls ───────────────────────────────────────────────────────────── */
.gg-scope .sp__btn{
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; align-self: flex-start;
  padding: 0.5rem 0.95rem; border-radius: 10px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  background: linear-gradient(109deg, #e6e6e6 13%, #e6e6e6 100%);
  color: #111; border: 1px solid rgba(120,130,160,0.28);
}
.gg-scope .sp__btn--primary{
  background: linear-gradient(109deg, #2e5dff 0%, #002abf 60%, #001b82 100%);
  color: #fff; border-color: transparent;
}
.gg-scope .sp__btn--orange{
  background: linear-gradient(109deg, #ff962e 0%, #bf6000 60%, #824100 100%);
  color: #fff; border-color: transparent;
}
.gg-scope .sp__btn--sm{ padding: 0.4rem 0.75rem; font-size: 0.7rem; }
.gg-scope .sp__btn--ghost{ color: #334155; }

/* Neumorphic tab track, as in components/tabs/tabs.css */
.gg-scope .sp__tabs{
  display: inline-flex; align-self: flex-start; gap: 6px; padding: 5px;
  border-radius: 15px; border: 1px solid rgba(120,130,160,0.3);
  background: linear-gradient(180deg, #ececee 0%, #e2e3e8 100%);
  box-shadow: inset 0 1px 2px rgba(20,28,60,0.1), 0 1px 0 rgba(255,255,255,0.9);
  max-width: 100%; flex-wrap: nowrap; overflow: hidden;
}
.gg-scope .sp__tab{
  padding: 0.5rem 0.85rem; border-radius: 11px;
  font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap;
  background: linear-gradient(109deg, #e6e6e6 13%, #e6e6e6 100%); color: #111;
}
.gg-scope .sp__tab--on{
  background: linear-gradient(109deg, #2e5dff 0%, #002abf 60%, #001b82 100%);
  color: #fff;
}
.gg-scope .sp__search,
.gg-scope .sp__urlbox,
.gg-scope .sp__select{
  border-radius: 10px; border: 1px solid rgba(120,130,160,0.3);
  background: linear-gradient(180deg, #f7f7f9, #eeeff3);
  box-shadow: inset 0 1px 2px rgba(20,28,60,0.1);
  font-size: 0.75rem; color: var(--sp-slate4);
  padding: 0.55rem 0.75rem;
}
.gg-scope .sp__search{ flex: 1 1 auto; min-width: 0; }
.gg-scope .sp__urlbox{ flex: 1 1 auto; min-width: 0; color: var(--sp-slate7); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gg-scope .sp__select{ align-self: flex-start; color: var(--sp-slate6); }
.gg-scope .sp__ctl{ display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.gg-scope .sp__inputrow{ display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.gg-scope .sp__rule{ height: 1px; width: 100%; background: var(--sp-edge); }

/* ── Rows and layout ─────────────────────────────────────────────────────── */
.gg-scope .sp__hrow{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.gg-scope .sp__srow{ display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; width: 100%; }
.gg-scope .sp__srow--top{ padding-top: 0.6rem; border-top: 1px solid var(--sp-edge); }
.gg-scope .sp__tl{ display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 auto; min-width: 0; }
.gg-scope .sp__amt{ display: flex; align-items: center; gap: 0.6rem; flex: none; }
.gg-scope .sp__badge{ font-size: 0.6875rem; font-weight: 600; color: #15803d; background: #f0fdf4; border-radius: 99px; padding: 0.1rem 0.45rem; }
.gg-scope .sp__cols{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; width: 100%; }
.gg-scope .sp__main{ flex: 2.1 1 460px; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.gg-scope .sp__side{ flex: 1 1 250px; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.gg-scope .sp__cols2{ display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: stretch; width: 100%; }
/* min-width:0 is load-bearing. The referral URL is one unbreakable token, so
   without it that card's min-content width wins over its flex share and the
   card overflows across its neighbour. */
.gg-scope .sp__cols2 > *{ flex: 1 1 280px; min-width: 0; }
.gg-scope .sp__grow2{ flex: 2 1 380px; min-width: 0; }
/* align-items must stay flex-start. With stretch, equalising row heights across
   a 12-card wrap sent the offline renderer into a layout blow-up (sub-second to
   over three minutes for this one page) and it left a tall dead band under the
   Profile field grid. Cards get an even look from min-height instead. */
.gg-scope .sp__wrap{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; width: 100%; }
.gg-scope .sp__wrap > *{ flex: 1 1 235px; min-width: 0; }
.gg-scope .sp__wrap--4 > *{ flex: 1 1 190px; }
.gg-scope .sp__wrap--2{ gap: 0.9rem 2.5rem; }
.gg-scope .sp__wrap--2 > *{ flex: 1 1 420px; }
.gg-scope .sp__rowc{ flex-direction: row; align-items: center; gap: 1rem; }

/* ── Home ──────────────────────────────────────────────────────────────── */
.gg-scope .sp__stepper{ flex-direction: row; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; }
.gg-scope .sp__step{ display: flex; align-items: center; gap: 0.55rem; flex: none; }
.gg-scope .sp__stepico{ height: 30px; width: 30px; flex: none; border-radius: 8px; background: #dbe2f2; }
.gg-scope .sp__steptxt{ display: flex; flex-direction: column; gap: 0.1rem; }
.gg-scope .sp__steplbl{ font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.gg-scope .sp__steprail{ height: 3px; flex: 1 1 auto; border-radius: 2px; background: #dfe3ec; }
.gg-scope .sp__steprail--on{ background: var(--sp-blue); }
.gg-scope .sp__task{ display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; }
.gg-scope .sp__node{ height: 12px; width: 12px; flex: none; border-radius: 50%; margin-top: 3px; background: #fff; border: 2px solid #cbd5e1; }
.gg-scope .sp__task--opt,
.gg-scope .sp__task--call{ padding: 0.8rem; border-radius: 12px; align-items: center; }
.gg-scope .sp__task--opt{ background: #fdf7ec; border: 1px solid #ecdcc0; }
.gg-scope .sp__task--call{ background: #faf7f3; border: 1px solid #c9a882; }
.gg-scope .sp__segs{ display: flex; gap: 4px; width: 100%; }
.gg-scope .sp__seg{ height: 5px; flex: 1 1 0; border-radius: 3px; background: #e6eaf2; }

/* ── Opportunities ───────────────────────────────────────────────────────── */
.gg-scope .sp__role{ gap: 0.3rem; padding: 0.8rem 0.85rem; min-height: 138px; }
.gg-scope .sp__rt{ font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.gg-scope .sp__role .sp__rt{ min-height: 2.1em; }
.gg-scope .sp__rpay{ font-size: 0.75rem; font-weight: 500; color: var(--sp-slate7); }
.gg-scope .sp__rshape{ font-size: 0.6875rem; font-weight: 500; color: var(--sp-brand); line-height: 1.35; }
.gg-scope .sp__rmeta{ font-size: 0.6875rem; color: var(--sp-slate5); }
.gg-scope .sp__cfoot{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; margin-top: auto; padding-top: 0.45rem; border-top: 1px solid var(--sp-edge); }
.gg-scope .sp__cfoot .sp__rmeta{ font-size: 0.625rem; white-space: nowrap; overflow: hidden; }
.gg-scope .sp__cfoot .sp__link{ flex: none; font-size: 0.6875rem; }
.gg-scope .sp__favs{ display: flex; align-items: center; gap: 0.35rem; min-width: 0; overflow: hidden; }
.gg-scope .sp__avs{ display: flex; flex: none; }
.gg-scope .sp__av{
  height: 17px; width: 17px; flex: none; border-radius: 50%; margin-left: -5px;
  background: var(--sp-blue); color: #fff; border: 1.5px solid #fff;
  font-size: 0.5rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.gg-scope .sp__av:first-child{ margin-left: 0; }
.gg-scope .sp__av:nth-child(3){ background: #d97706; }

/* ── My Projects ─────────────────────────────────────────────────────────── */
.gg-scope .sp__board{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem; width: 100%; }
.gg-scope .sp__kcol{
  flex: 1 1 195px; display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.65rem; min-height: 220px; border-radius: 14px;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,23,42,0.05);
}
.gg-scope .sp__khead{ display: flex; align-items: center; gap: 0.4rem; }
.gg-scope .sp__kdot{ height: 7px; width: 7px; border-radius: 50%; flex: none; }
.gg-scope .sp__kdot--b{ background: #2563eb; } .gg-scope .sp__kdot--a{ background: #f59e0b; }
.gg-scope .sp__kdot--v{ background: #7c3aed; } .gg-scope .sp__kdot--g{ background: #16a34a; }
.gg-scope .sp__kname{ font-size: 0.75rem; font-weight: 600; color: var(--sp-slate7); }
.gg-scope .sp__kcount{ font-size: 0.6875rem; font-weight: 600; color: var(--sp-slate4); }
.gg-scope .sp__kdate{ font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-slate4); padding-top: 0.15rem; border-top: 1px solid var(--sp-edge); }
.gg-scope .sp__kcard{
  display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
  padding: 0.6rem; background: #fff; border: 1px solid #cbd5e1; border-radius: 9px;
}
.gg-scope .sp__kt{ font-size: 0.75rem; font-weight: 500; color: #1e293b; line-height: 1.3; }
.gg-scope .sp__ktag{ font-size: 0.625rem; font-weight: 500; border-radius: 5px; padding: 0.1rem 0.35rem; }
.gg-scope .sp__ktag--pink{ background: #fce7f3; color: #9d174d; }
.gg-scope .sp__ktag--blue{ background: #dbeafe; color: #1e40af; }
.gg-scope .sp__ktag--green{ background: #dcfce7; color: #166534; }
.gg-scope .sp__kfoot{ display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
.gg-scope .sp__kdue,
.gg-scope .sp__kchk{ font-size: 0.625rem; color: var(--sp-slate5); white-space: nowrap; }

/* ── Referrals and Profile ───────────────────────────────────────────────── */
.gg-scope .sp__stat{ gap: 0.45rem; padding: 0.85rem 0.9rem; min-height: 120px; }
.gg-scope .sp__chips{ display: flex; flex-wrap: wrap; gap: 0.45rem; width: 100%; }
.gg-scope .sp__chip{
  font-size: 0.75rem; font-weight: 500; color: var(--sp-slate7);
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 99px; padding: 0.2rem 0.65rem;
}
.gg-scope .sp__field{ display: flex; flex-direction: column; gap: 0.15rem; }
.gg-scope .sp__flabel{ font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sp-slate4); }
.gg-scope .sp__fval{ font-size: 0.8125rem; color: #0f172a; }

/* Small viewports. The rail hides the glimpse entirely below its own
   breakpoint, so this only has to cover tablet widths. */
@media (max-width: 820px){
  .gg-scope .gg-sos__blur:has(.sp){ padding: 60px 4vw 4vw; }
  .gg-scope .sp__wrap > *{ flex: 1 1 45%; }
  .gg-scope .sp__h1{ font-size: 1.4rem; }
}