/* .rl__lockmsg, .rl__grid2 and .rl__ts WERE DELETED 27 August 2026 with the candidate
layout they dressed: a blurred name form behind a lock message, and a tinted steps pane.
Nicole replaced that shape with the same two panels the business tab renders.
REMOVED RATHER THAN LEFT DORMANT. A rule for a deleted shape is how the shape returns,
because the next person to write className 'rl__lockmsg' gets a styled box and no error. */
/* ============================================================================
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; }
/* The muted EXAMPLE tag on the profile-strength card, mirroring the portal's own. */
.gg-scope .sp__eyebrow--r{ color: #94a3b8; margin-left: auto; }
.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; }
/* 2026-08-19: the filled segment, so the 80% figure beside it is actually represented.
Added because the class was going to ship with NO RULE AT ALL otherwise, which is the
qualifier-q__textfield trap in this repo's own trap list: a class present on the element,
absent from every stylesheet, and therefore invisible. Checked before pushing, not after. */
.gg-scope .sp__seg--on{ background: var(--sp-blue, #002ABF); }
/* ── 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; }
}
/* ══ THE LIVE REFERRALS SURFACE ═══════════════════════════════════════════════
19 Aug 2026. FREELANCER 18 at 1:47 and 2:31. Referrals is the one rail surface
that renders for real: unblurred, scrollable and interactive. It draws NO
.gg-sos__blur, so the blur rule in app.v2.css simply never applies here and
nothing has to be un-set. The glimpse box itself does need overriding, because
it centres a small card and this is a full page.
THE DOUBLE CLASS IS DELIBERATE. .gg-sos__glimpse--live alone ties with
app.v2.css on specificity and would depend on stylesheet order; chaining it to
.gg-sos__glimpse wins outright, so this holds whichever file loads last.
─────────────────────────────────────────────────────────────────────────── */
.gg-scope .gg-sos__glimpse.gg-sos__glimpse--live{
display: block; align-items: stretch; justify-content: flex-start;
overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.gg-scope .gg-sos__glimpse--live::before{ backdrop-filter: none; }
/* ───────────────────────────────────────────────────────────────────────────
2026-08-19 (Nicole). THREE COMPLAINTS, ONE CAUSE, AND THE CAUSE IS NOT SPACING.
Reported as "it opens with a lot of space above that you have to scroll past",
"flat panels instead of the glass layered ones", and "not sitting on the right
textured background".
THE FIRST TWO ARE THE SAME BUG. .gg-sos__glimpse::before in app.v2.css is an
OPAQUE #f2efe9 wash across the whole glimpse, added 7 Aug on purpose so a
padlocked glimpse hides the calculator behind it. .gg-sos__live never set a
position or a z-index, so its children paint in the same layer as that wash and
LOSE, because the pseudo-element comes later in paint order. The header, the
tabs, the hero and the sub-line were all rendered, visible, opacity 1, dark
text, sitting at y=96 to y=290 - and invisible. Measured, not guessed.
THE TELL THAT EXPLAINS EVERYTHING: the only children that DID show are
.rl__pane and .rl__cell, and they show because backdrop-filter gives them their
own stacking context. Nothing else on the surface has one. So "empty space at
the top" was never spacing, and adding a negative margin - the obvious fix -
would have moved invisible elements around and shipped the bug.
DO NOT FIX THIS BY LOWERING THE WASH. The comment on it in app.v2.css is
explicit that showing the calculator through it is the bug, not a feature. We
keep it opaque and lift our own content over it instead.
─────────────────────────────────────────────────────────────────────────── */
.gg-scope .gg-sos__live{ position: relative; z-index: 1; }
/* The wash stays opaque, but it was a FLAT fill whilst every other surface sits on
the concrete texture, which was the third complaint.
AND IT MOVES OFF THE ::before ONTO THE ELEMENT, WHICH IS THE FIX FOR A SECOND
DEFECT NICOLE FOUND BY SCROLLING. 2026-08-19, same evening.
.gg-sos__glimpse--live is position: fixed with overflow-y: auto, and this surface
is TALLER than the viewport - measured 1634px of content against 861px of box. The
wash was on an `position: absolute; inset: 0` pseudo-element, which sizes to the
scroll ORIGIN rather than to the visible box, so scrolling down slid the wash up
and out and the pricing calculator underneath became visible through the gap.
AN ELEMENT BACKGROUND DOES NOT SCROLL WITH OVERFLOW CONTENT. It paints over the
padding box at every scroll position, which is exactly the behaviour wanted, and it
needs no extra element. So the background moves here and the pseudo-element is
switched off for this variant only - the padlocked glimpse still uses its ::before,
because that variant centres a small card and never scrolls.
WHY THE BUG WAS INVISIBLE UNTIL TODAY: before the stacking fix above, everything in
.gg-sos__live painted UNDER the wash, so there was nothing worth scrolling to. The
moment the content came out from underneath, the wash's own defect became reachable.
One fix exposing the next is not a regression, but it does mean the surface needed
looking at a second time rather than once. */
/* 2026-08-25 (Alexander, Loom 20 at 09:31, reported through Nicole as "it isnt
layered"). THE PANES WERE NEVER THE PROBLEM. .gg-pane-1 is
rgba(255,255,255,.55) over backdrop-filter: blur(6px), and a blur over a FLAT
fill has nothing to refract, so every pane paints as a plain white card. The
panes here measure identically to the portals own and still read wrong,
because what differs is the GROUND.
THIS IS THE SAME FIX AS e1a16e4 ON 24 AUG, WHICH MISSED THIS ONE SURFACE.
That commit put the three portal backdrop layers behind their glass, but
scoped them :has(.gg-portal-preview). The referrals surface is OUR render and
never emits that class, so the selector could not reach it. Extending the
scope would have been the smaller diff and is WRONG here, for the reason in
the next paragraph.
IT GOES ON THE ELEMENT, NOT ON ::before, AND THAT IS NOT A STYLE PREFERENCE.
The block above records why: this variant is position: fixed with overflow-y:
auto and its content is taller than the box, and an inset:0 pseudo-element
sizes to the scroll ORIGIN, so it slides up and out on scroll and exposes the
calculator underneath. Nicole found that by scrolling on 19 Aug. The 24 Aug
comment on the :has() rule says the same thing from the other side, that the
pseudo-element is safe THERE only because .gg-sos__blur is overflow: hidden
and does not scroll. An element background paints over the padding box at
every scroll position, so the layers arrive and the scroll defect does not.
OPACITY IS PRESERVED, which is the one property the 7 Aug note in app.v2.css
says must not be given up. The bottom layer is an opaque #efede7 and
bg-page.webp is cover over it, so the calculator behind stays hidden.
#efede7 RATHER THAN #f2efe9, deliberately. #efede7 is what the portals
page-backdrop.css uses and what e1a16e4 shipped for the preview surfaces, so
the two grounds now match instead of sitting two hex values apart.
Layer stack and blend modes are byte-identical to the :has() rule below. */
.gg-scope .gg-sos__glimpse.gg-sos__glimpse--live{
background:
linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0) 100%)
left bottom / 100% 75vh no-repeat,
url("data:image/svg+xml;utf8,")
left top / 200px 200px repeat,
url('bg-page.webp') center center / cover no-repeat,
#efede7;
background-blend-mode: normal, multiply, normal, normal;
}
.gg-scope .gg-sos__glimpse.gg-sos__glimpse--live::before{ content: none; }
/* The layered glass frame, traced from .thin-glass-frame in app.v2.css rather than
invented, so the panels match every other inline panel in the calculator. It is
copied rather than reused by class because these elements are built in
signed-out-sidebar.jsx through React.createElement string classNames, and a CSS
rule here keeps the two files from drifting apart at seven call sites.
The relative URLs resolve against THIS stylesheet, which sits in assets/ beside
app.v2.css, so the paths are the same ones that file uses. */
.gg-scope .rl__pane, .gg-scope .rl__cell{ position: relative; }
.gg-scope .rl__pane::before, .gg-scope .rl__cell::before{
content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background:
url('glass-frame/top-left.webp') top left / 14px 14px no-repeat,
url('glass-frame/top-right.webp') top right / 14px 14px no-repeat,
url('glass-frame/bottom-left.webp') bottom left / 14px 14px no-repeat,
url('glass-frame/bottom-right.webp') bottom right / 14px 14px no-repeat,
url('glass-frame/top.webp') 14px top / calc(100% - 28px) 14px repeat-x,
url('glass-frame/bottom.webp') 14px bottom / calc(100% - 28px) 14px repeat-x,
url('glass-frame/left.webp') left 14px / 14px calc(100% - 28px) repeat-y,
url('glass-frame/right.webp') right 14px / 14px calc(100% - 28px) repeat-y;
mix-blend-mode: multiply; z-index: 1;
}
.gg-scope .rl__pane > *, .gg-scope .rl__cell > *{ position: relative; z-index: 2; }
/* ── PORTAL-SERVED PREVIEW CONTAINER, behind ?preview=live. 20 Aug 2026 ─────────
Their markup arrives with its own stylesheet, which is scoped to .gg-preview, so it
cannot reach our page. This rule is the reverse guard: it stops THEIR block from
overflowing the glimpse, because their layout assumes a full portal viewport and ours
is a fixed panel beside the rail. Nothing here restyles their components. */
.gg-scope .gg-portal-preview{
width: 100%; max-width: 100%; overflow-x: hidden; contain: layout paint;
}
/* ══ THE PAGE SHELL PADDING, READ FROM THE PORTAL ═══════════════════════════════
Nicole, 26 August 2026: "please can you check the margin at the top of the referrals
view? The margin should match the portal, and I don't think it's that big." She was
right. It was 96px against the portal's 48px, exactly double, and nothing in this file
explained where 96 came from. The horizontal was wrong too and nobody had noticed:
3vw is 43px at a 1440 viewport where the portal uses 104px.
THE SOURCE IS app/account/_components/CustomerShell.tsx, whose carries
`px-4 pt-10 pb-28 sm:px-6 lg:px-12 lg:pt-12 lg:pb-8 xl:px-[104px]`. Resolved:
base 16px sides, 40px top, 112px bottom
>= 640px 24px sides
>= 1024px 48px sides, 48px top, 32px bottom
>= 1280px 104px sides
TRACED RATHER THAN IMPORTED, and that is the reuse law's first exception stated out
loud: their shell is Tailwind utility classes on a server component, and this is a
plain stylesheet in an app with no build step, so there is no class or component to
reach for. The breakpoints are Tailwind's own so the two step at the same widths.
max-width: 1600px IS UNCHANGED and was already right. It matches SectionShellView's
`mx-auto w-full max-w-[1600px]`. */
.gg-scope .gg-sos__live{ padding: 40px 16px 112px; max-width: 1600px; margin: 0 auto; }
@media (min-width: 640px){ .gg-scope .gg-sos__live{ padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px){
.gg-scope .gg-sos__live{ padding: 48px 48px 32px; }
}
@media (min-width: 1280px){ .gg-scope .gg-sos__live{ padding-left: 104px; padding-right: 104px; } }
.gg-scope .rl{ font-size: 15px; color: #0f172a; }
.gg-scope .rl__hrow{ margin-bottom: 1rem; }
/* ~~.gg-scope .rl__h1{ font-size: 1.875rem; font-weight: 700; color: #0f172a; margin: 0; }~~
FOLDED 3 September 2026, group 1 of the duplicate sweep. A SECOND base rule for
this selector in this media condition, fully dead on source order: every property
it set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet
before and after, media condition included, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__tabs{ display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.gg-scope .rl__tab{
appearance: none; border: 1px solid #cbd5e1; background: rgba(255,255,255,.6);
border-radius: 999px; padding: .4rem 1rem; font-size: .875rem; font-weight: 600;
color: #475569; cursor: pointer;
}
.gg-scope .rl__tab--on{ background: #06079c; border-color: #06079c; color: #fff; }
/* ~~.gg-scope .rl__hero{ font-size: 1.875rem; font-weight: 700; margin: 0 0 .25rem; color: #0f172a; }~~
FOLDED 3 September 2026, group 1 of the duplicate sweep. A SECOND base rule for
this selector in this media condition, fully dead on source order: every property
it set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet
before and after, media condition included, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__sub{ font-size: .875rem; color: #64748b; margin: 0 0 2rem; max-width: 62ch; }~~
FOLDED 3 September 2026, group 1 of the duplicate sweep. A SECOND base rule for
this selector in this media condition, fully dead on source order: every property
it set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet
before and after, media condition included, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__row{ display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 1024px){
.gg-scope .rl__row--3{ grid-template-columns: 2fr 1fr; align-items: stretch; }
.gg-scope .rl__row--2{ grid-template-columns: 1fr 1fr; align-items: stretch; }
}
/* ~~.gg-scope .rl__rail{ display: grid; gap: 1rem; grid-template-columns: 1fr; }~~
FOLDED 3 September 2026, group 1 of the duplicate sweep. A SECOND base rule for
this selector in this media condition, fully dead on source order: every property
it set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet
before and after, media condition included, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
@media (min-width: 640px){ .gg-scope .rl__rail{ grid-template-columns: 1fr 1fr; } }
.gg-scope .rl__pane,
.gg-scope .rl__cell{
background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
border-radius: 18px; padding: 1.5rem; border: 0;
box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
display: flex; flex-direction: column;
}
/* ~~.gg-scope .rl__cell{ padding: 1.25rem; }~~
FOLDED 3 September 2026, group 1 of the duplicate sweep. A SECOND base rule for
this selector in this media condition, fully dead on source order: every property
it set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet
before and after, media condition included, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__cell--btn{ appearance: none; cursor: pointer; text-align: left; font: inherit; }
.gg-scope .rl__cell--on{ outline: 2px solid #06079c; outline-offset: 2px; }
/* ~~(( ~~A SECOND .rl__eyebrow DEFINITION STOOD HERE and it was DEAD, overridden by the one
further down this file purely by source order. It was also the one with the RIGHT COLOUR.
Removed 2 September 2026 rather than left dormant, and the colour moved down to the live
rule. Its margin, 0 0 .75rem, was never in effect and is not restored. ~~ ))
.gg-scope .rl__fig{ font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; color: #0f172a; line-height: 1.1; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__fig--big{ font-size: 2.25rem; }
/* ~~.gg-scope .rl__fig--ok{ color: #0f8847; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__cap{ margin: auto 0 0; padding-top: .5rem; font-size: .875rem; line-height: 1.35; color: #475569; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__note{ font-size: .875rem; color: #64748b; margin: 0 0 .5rem; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__fine{ font-size: .75rem; color: #94a3b8; margin: .5rem 0 0; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__rule{ height: 1px; background: #e2e8f0; margin: .875rem 0; }
/* ~~.gg-scope .rl__filterline{ font-size: .875rem; color: #475569; margin: -.5rem 0 1.5rem; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__linkbtn{ appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; color: #06079c; cursor: pointer; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__srow{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* ~~.gg-scope .rl__h2{ font-size: 1.125rem; font-weight: 700; margin: 0 0 1rem; color: #0f172a; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__btn{
appearance: none; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
font-weight: 600; font-size: .875rem; padding: .5rem 1rem; white-space: nowrap;
}
.gg-scope .rl__btn--primary{ background: linear-gradient(109deg,#2e5dff,#002abf); color: #fff; }
.gg-scope .rl__btn--sec{ background: #fff; border-color: #cbd5e1; color: #334155; }
.gg-scope .rl__btn--ghost{ background: transparent; border-color: #cbd5e1; color: #334155; }
.gg-scope .rl__btn[disabled]{ opacity: .45; cursor: not-allowed; }
.gg-scope .rl__form{ margin-top: 1rem; }
@media (min-width: 640px){ .gg-scope .rl__grid2{ grid-template-columns: 1fr 1fr; } }
.gg-scope .rl__field{ display: block; margin-bottom: 1rem; }
.gg-scope .rl__flabel{ display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .35rem; }
.gg-scope .rl__input{
width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: .55rem .75rem;
font-size: .9375rem; color: #0f172a;
/* the same derived concave white as the checkout fields, vv943 */
background: linear-gradient(180deg,#FFFFFF 0%,#EDEEF2 100%);
}
/* 27 Aug 2026 (Nicole): "the text is a lighter grey". There was NO ::placeholder rule
here at all, so these fields fell back to the browser default, which is darker than
every other input in the product. #b8c0cc is the checkout form's own value, read from
app.v2.css:6875 rather than sampled from a screenshot. */
.gg-scope .rl__input::placeholder{ color: #b8c0cc; }
.gg-scope .rl__input:focus{ outline: 2px solid #06079c; outline-offset: 1px; }
.gg-scope .rl__err{ color: #b91c1c; font-size: .8125rem; font-weight: 600; margin: 0 0 .5rem; }
.gg-scope .rl__done{ font-size: .875rem; color: #0f8847; font-weight: 600; margin: .75rem 0 0; }
.gg-scope .rl__frow{ display: flex; gap: .625rem; margin-top: .5rem; }
/* ~~.gg-scope .rl__controls{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__search{ flex: 1 1 220px; min-width: 220px; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__ctl{ display: block; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__clabel{ display: block; font-size: .75rem; font-weight: 500; color: #475569; margin-bottom: .25rem; }~~
FOLDED 3 September 2026, group 3 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__select{
border: 1px solid #cbd5e1; border-radius: 10px; padding: .5rem .625rem;
font-size: .875rem; background: #fff; color: #0f172a;
}~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__tablewrap{ overflow-x: auto; border-radius: 14px; border: 1px solid #e2e8f0; }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__table{ width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; background: rgba(255,255,255,.5); }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* ~~.gg-scope .rl__table th{ text-align: left; padding: .75rem 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; background: rgba(248,250,252,.6); border-bottom: 1px solid #cbd5e1; }~~
FOLDED 4 September 2026. A PARTIAL duplicate. Every declaration except `background` was
restated identically by the later rule, and `padding: .75rem 1rem` and `padding: 12px 16px`
are THE SAME VALUE at a 16px root, so nothing but the background was ever reaching the page
from here. That one carried across and is now on the surviving rule.
⚠️ THE BORDER LOOKS LIKE A CONFLICT AND IS NOT ONE. This rule sets `1px solid #cbd5e1` and
the later sets `1px solid rgba(15, 23, 42, .08)`. Same specificity, later wins, so the
translucent one was already what painted. Folding does not change it, it just stops the
sheet claiming two different borders for one cell. */
/* ~~.gg-scope .rl__table td{ padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0; }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__mono{ font-family: ui-monospace,SFMono-Regular,Menlo,monospace; color: #334155; }
.gg-scope .rl__dim{ color: #94a3b8; }
/* ~~.gg-scope .rl__badge{ display: inline-block; padding: .125rem .5rem; border-radius: 6px; font-size: 11px; font-weight: 700; background: #fef3c7; color: #92400e; }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__emptycell{ padding: 3rem 1rem !important; text-align: center; }
.gg-scope .rl__emptyh{ font-weight: 600; color: #334155; margin: 0; }
.gg-scope .rl__emptys{ font-size: .875rem; color: #64748b; margin: .25rem 0 0; }
.gg-scope .rl__empty2{ text-align: center; padding: 3rem 1.5rem; }
/* The 900px override was removed on 26 August with the 96px it was correcting. It read
`padding: 84px 5vw 5vw`, which was a second invented scale fighting the first, and it
sat BELOW the new min-width rules so it would have overridden them at 640 to 900. The
portal's own base and sm steps cover this range. .rl__live keeps its own rule below. */
@media (max-width: 900px){ .gg-scope .rl__live{ padding: 84px 5vw 5vw; } }
/* ── Portal preview: mirror the portal's OWN page padding, exactly ───────────
Nicole, 20 Aug: "I want the panel sizes to be exactly the same as what we have
on the portal, spacing, margins, and stuff like that. Don't guess."
So this is not a guess. It is read off the portal's own element:
px-4 pt-10 pb-28 sm:px-6 lg:px-12 lg:pt-12 lg:pb-8 xl:px-[104px]
which is 16 / 24 / 48 / 104px horizontal across their four breakpoints, and a
bottom of 112px collapsing to 32px at lg. Measured at 1440: their main is
1329px wide with 104px sides, giving a 1121px content box. Ours was 4vw
(57.6px), giving 1214px - 93px too wide, with the content sitting closer to
the edges. These rules land us on 1121px exactly.
SCOPED TO :has(.gg-portal-preview) ON PURPOSE. The traced surfaces keep their
own padding, so the default path that every visitor sees is untouched by this.
TOP STAYS OURS at 104px, and that is deliberate rather than an oversight: we
render a tab strip above the panel that the portal Home does not have, so
their pt-12 is not a like-for-like number to copy. */
.gg-scope .gg-sos__blur:has(.gg-portal-preview){
padding-left: 16px; padding-right: 16px; padding-bottom: 112px;
}
@media (min-width: 640px){
.gg-scope .gg-sos__blur:has(.gg-portal-preview){ padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px){
.gg-scope .gg-sos__blur:has(.gg-portal-preview){
padding-left: 48px; padding-right: 48px; padding-bottom: 32px;
}
}
@media (min-width: 1280px){
.gg-scope .gg-sos__blur:has(.gg-portal-preview){ padding-left: 104px; padding-right: 104px; }
}
/* ══ THE GROUND UNDER THEIR PANEL. 24 Aug 2026, Nicole's third fault ═════════
Reported as "you do not have the correct color of the base layered glass panel".
IT IS NOT THE PANEL. Measured on both pages the same afternoon, their
/partners and our rail agree exactly: background rgba(255,255,255,0.2),
backdrop-filter blur(6px). .gg-section-base has NO colour of its own -- it is
a fifth of white over whatever is behind it -- so a panel that matches
declaration for declaration still reads wrong when the ground does not.
WHAT IS BEHIND IT ON THEIR PAGE is three fixed layers from
components/frames/page-backdrop.css: the bg-page photo on #efede7, a paper
grain multiplied at 25%, and a white gradient rising over the lower 75vh.
Count of those in their payload: ZERO. They live in the app shell, not in the
surface, so the preview endpoint can never carry them.
AND WE DO NOT NEED IT TO, because they are ours. That file's own header says
the fade is "verbatim from gogorilla-pricing-calculator assets/app.css:37-46.
The pricing calculator is the design source of truth for every component."
The photo and the grain are body and body::before in the same file. This is
the glass-and-buttons ruling again: what came from us we render from our own
copy rather than ask them to publish back.
WHY IT IS ON ::before AND NOT ON TWO NEW ELEMENTS. The wash is already here,
already inset:0, already the thing painting under .gg-sos__blur. The blurred
glimpse does not scroll -- .gg-sos__blur is overflow:hidden -- so the
scroll-origin defect that drove the live referrals wash onto its element in
August cannot apply. Three background layers replace one flat fill and no
markup changes.
THE GRAIN ALPHA IS SCALED, NOT APPROXIMATED, and this is the one line worth
checking. Their grain is a separate element at opacity .25 with
mix-blend-mode:multiply; ours is a background layer, and a layer carries no
opacity of its own. For a multiply source of colour Cs and alpha As over an
opaque backdrop Cb, element opacity O gives
Cb*(1 - O*As*(1 - Cs))
and a layer whose own alpha is O*As gives the identical expression. So
0.035 * 0.25 = 0.00875 in the feColorMatrix alpha row is an EQUIVALENCE and
not a taste judgement. Every other character of the data-URI is byte-identical
to app.css:29, including the %23n, which breaks as a literal #.
THE FADE IS KEPT AT 75vh EVEN THOUGH IT MAY WASH THE GLASS OUT. That argument
has already been had on their side -- shortened to 32vh on 6 Aug for exactly
this reason, restored on the 11th -- and the ruling recorded there is that
parity with the calculator wins and the panes get tuned instead. These panes
ARE theirs, so re-litigating it here would put the two pages back out of step.
SCOPED TO :has(.gg-portal-preview) like the padding above it: the traced
surfaces keep the flat concrete wash, so the default path every visitor sees
is untouched. The wash also stays fully opaque, which is the one property the
7 Aug comment in app.v2.css says must not be given up -- the calculator behind
must not show through. bg-page.webp is cover over an opaque #efede7. */
.gg-scope .gg-sos__glimpse:has(.gg-portal-preview)::before{
background:
linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0) 100%)
left bottom / 100% 75vh no-repeat,
url("data:image/svg+xml;utf8,")
left top / 200px 200px repeat,
url('bg-page.webp') center center / cover no-repeat,
#efede7;
background-blend-mode: normal, multiply, normal, normal;
}
/* THE TOP PADDING WAS 104px TO CLEAR A TAB STRIP THAT NO LONGER RENDERS.
The note on the padding block above says so in as many words: "TOP STAYS OURS
at 104px ... we render a tab strip above the panel that the portal Home does
not have". v54 stopped drawing that strip over their composition, so the
reason went with it and the number was left behind. Theirs is pt-10 rising to
lg:pt-12 -- 40px, then 48px from 1024 -- and there is nothing else in the
glimpse to clear: no close control, no header, the lock card is centred.
Checked before changing rather than assumed. */
.gg-scope .gg-sos__blur:has(.gg-portal-preview){ padding-top: 40px; }
@media (min-width: 1024px){
.gg-scope .gg-sos__blur:has(.gg-portal-preview){ padding-top: 48px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
THE REFERRALS SURFACE, MATCHED TO THE PORTAL. 24 Aug 2026.
Alexander: "it has to look identical to the portal." Everything below this
line replaces the hand-drawn .rl__* skin above it and the JS-injected
.gg-refskin block that used to live in signed-out-sidebar.jsx. That block
is deleted, not disabled — its `display:contents` + `order:` rules existed
to re-sort a DOM shaped for a different layout, and the DOM is shaped like
the portal's now.
APPENDED RATHER THAN INTERLEAVED, DELIBERATELY. The older .rl__* rules stay
where they are so the surrounding surfaces (.sp-*, the glimpse chrome) are
untouched; these rules come later in the file and win on source order at
equal specificity. The one case that matters is ::before — a cell carries
BOTH .rl__cell and .gg-pane-1, and only one ::before can exist, so
.gg-pane-1::before must come after .rl__cell::before. It does. Do not move
this block above the one at the top of the file.
PORTED FROM SOURCE, NOT MEASURED OFF A SCREENSHOT:
components/tabs/tabs.css → .gg-tabs / .gg-tab
components/glass/glass.css → .gg-section-base, .gg-pane-1, .gg-pane-2
The asset URLs are the only edit: theirs are absolute /assets/..., and a
relative URL in THIS file already resolves against assets/, so the prefix
comes off. Everything else, shadow order included, is verbatim.
═══════════════════════════════════════════════════════════════════════════ */
/* ── The tab strip. components/tabs/tabs.css ─────────────────────────────── */
.gg-scope .gg-tabs{
display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
width: fit-content; max-width: 100%; padding: 6px; border-radius: 16px;
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);
margin: 0 0 24px;
}
.gg-scope .gg-tab{
position: relative; display: inline-flex; align-items: center; gap: 8px;
padding: 14px 19px; border: 1px solid transparent; border-radius: 12px;
font-family: inherit; font-size: 14.4px; font-weight: 600; line-height: 1;
letter-spacing: 0.005em; white-space: nowrap; cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}
.gg-scope .gg-tab:focus-visible{ outline: 2px solid var(--gg-blue, #002abf); outline-offset: 2px; }
.gg-scope .gg-tab--ghost{
background: linear-gradient(109deg, #e6e6e6 13%, #e6e6e6 100%); color: #111111;
box-shadow:
-2px -2px 2px -1px rgba(255, 255, 255, 0.36),
inset 1px 1.5px 2px rgba(255, 255, 255, 0.6),
inset -2px -2px 2px rgba(140, 139, 137, 0.29),
-2px -2px 8px rgba(224, 223, 222, 0.5),
2px 2px 8px rgba(84, 84, 84, 0.14),
inset -1px -4px 20px rgba(179, 179, 179, 0.36);
}
.gg-scope .gg-tab--ghost:hover{ background: linear-gradient(109deg, #eeeeee 13%, #eaeaea 100%); transform: translateY(-1px); }
.gg-scope .gg-tab--ghost:active{ transform: translateY(0); }
.gg-scope .gg-tab--selected{
background: linear-gradient(109deg, #2e5dff 0%, #002abf 60%, #001b82 100%); color: #ffffff;
box-shadow:
-2px -2px 2px -1px rgba(255, 255, 255, 0.5),
inset 1px 1.5px 2px rgba(219, 227, 255, 0.69),
inset -2.5px -2px 2px rgba(123, 145, 227, 0.63),
2px 2px 8px rgba(84, 84, 84, 0.35),
inset -1px -4px 20px rgba(0, 31, 145, 0.8);
}
/* ── The section base: ONE pane holding the whole surface. glass.css:547 ─── */
.gg-scope .gg-section-base{
position: relative; isolation: isolate; padding: 24px;
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 0; border-radius: 18px;
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);
}
.gg-scope .gg-section-base::before{
content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background:
url('glass-frame/top-left.webp') top left / 22px 22px no-repeat,
url('glass-frame/top-right.webp') top right / 22px 22px no-repeat,
url('glass-frame/bottom-left.webp') bottom left / 22px 22px no-repeat,
url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
url('glass-frame/top.webp') 22px top / calc(100% - 44px) 22px repeat-x,
url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
url('glass-frame/left.webp') left 22px / 22px calc(100% - 44px) repeat-y,
url('glass-frame/right.webp') right 22px / 22px calc(100% - 44px) repeat-y;
mix-blend-mode: multiply; z-index: 1; image-rendering: pixelated;
}
.gg-scope .gg-section-base > *{ position: relative; z-index: 2; }
/* ── Level 1 pane. glass.css:41 ──────────────────────────────────────────── */
.gg-scope .gg-pane-1{
position: relative; isolation: isolate;
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 0; border-radius: 18px;
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);
transition: box-shadow 0.2s, transform 0.2s;
}
.gg-scope .gg-pane-1::before{
content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background:
url('glass-frame/top-left.webp') top left / 22px 22px no-repeat,
url('glass-frame/top-right.webp') top right / 22px 22px no-repeat,
url('glass-frame/bottom-left.webp') bottom left / 22px 22px no-repeat,
url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
url('glass-frame/top.webp') 22px top / calc(100% - 44px) 22px repeat-x,
url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
url('glass-frame/left.webp') left 22px / 22px calc(100% - 44px) repeat-y,
url('glass-frame/right.webp') right 22px / 22px calc(100% - 44px) repeat-y;
mix-blend-mode: multiply; z-index: 1; image-rendering: pixelated;
}
.gg-scope .gg-pane-1::after{
content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
background: radial-gradient(130% 90% at 50% -15%, rgba(255, 255, 255, 0.5), transparent 55%);
z-index: 0;
}
.gg-scope .gg-pane-1 > *{ position: relative; z-index: 2; }
.gg-scope .gg-pane-1--tinted{ background: linear-gradient(90deg, #ffffff 0%, #e8edff 100%); }
.gg-scope .gg-pane--selectable{ cursor: pointer; }
.gg-scope .gg-pane--selectable:not(.gg-pane--selected):hover{
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 2px rgba(15, 23, 42, 0.05),
0 20px 40px -18px rgba(44, 51, 102, 0.26);
transform: translateY(-1px);
}
.gg-scope .gg-pane-1.gg-pane--selected{
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 238, 255, 0.85) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 2px rgba(15, 23, 42, 0.05),
0 0 0 2px rgba(0, 42, 191, 0.45),
0 18px 36px -18px rgba(0, 42, 191, 0.3);
}
/* ── Level 2 pane: the metal-framed money cell. One per screen, never nested. */
.gg-scope .gg-pane-2{
--gg-pane-2-slice: 18px;
position: relative; isolation: isolate;
background:
linear-gradient(rgba(255, 251, 244, 0.5), rgba(255, 251, 244, 0.5)),
url('UI_Card_Concrete_02_Seamless.webp') 0 0 / 480px 480px repeat;
-webkit-backdrop-filter: none; backdrop-filter: none;
border: 0;
border-radius: calc(var(--gg-pane-2-slice) * 0.86);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.1);
}
.gg-scope .gg-pane-2::before{ content: none; }
.gg-scope .gg-pane-2::after{
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
image-rendering: pixelated; background-repeat: no-repeat;
background-image:
url('metal-frame/Metal%20frame-top%20left.webp'),
url('metal-frame/Metal%20frame-top%20center.webp'),
url('metal-frame/Metal%20frame-top%20right.webp'),
url('metal-frame/Metal%20frame-left.webp'),
url('metal-frame/Metal%20frame-right.webp'),
url('metal-frame/Metal%20frame-bottom%20left.webp'),
url('metal-frame/Metal%20frame-bottom%20center.webp'),
url('metal-frame/Metal%20frame-bottom%20right.webp');
background-size:
var(--gg-pane-2-slice) var(--gg-pane-2-slice),
calc(100% - (2 * var(--gg-pane-2-slice))) var(--gg-pane-2-slice),
var(--gg-pane-2-slice) var(--gg-pane-2-slice),
var(--gg-pane-2-slice) calc(100% - (2 * var(--gg-pane-2-slice))),
var(--gg-pane-2-slice) calc(100% - (2 * var(--gg-pane-2-slice))),
var(--gg-pane-2-slice) var(--gg-pane-2-slice),
calc(100% - (2 * var(--gg-pane-2-slice))) var(--gg-pane-2-slice),
var(--gg-pane-2-slice) var(--gg-pane-2-slice);
background-position: left top, center top, right top, left center, right center, left bottom, center bottom, right bottom;
opacity: 0.85; z-index: 0;
}
.gg-scope .gg-pane-2 > *{ position: relative; z-index: 1; }
/* ── The page's own rhythm. ─────────────────────────────────────────────── */
/* ⚠️ THE HEADER IS A ROW NOW, because the two referral tabs moved into it on 1 September 2026,
beside the Referrals title. The portal lane's arrangement: "The page title, then two tabs beside
it: Refer a business and Refer a candidate."
IT WAS margin-ONLY BEFORE and a block container would have stacked the tabs under the title,
which is not "beside it". Measured before writing this: .rl__hrow carried no display property in
either of its two rules.
⚠️ THIS RULE LIVES HERE AND NOT IN referral-mode-tabs.css, DELIBERATELY. That file's own header
says it is exclusively the panel-02 segmented control and that every selector in it matches the
one it overrides. PR #44 added unrelated layout to it on 28 August and was closed for exactly
that. The header belongs to this stylesheet, so the header rule does too.
IT WRAPS. At 390px the title and a two-tab strip do not fit on one line, and wrapping is better
than either shrinking the tabs or letting the row scroll. */
.gg-scope .rl__hrow{ margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gg-scope .rl__h1{ font-size: 1.875rem; font-weight: 700; color: #0f172a; margin: 0; }
.gg-scope .rl__hero{ font-size: 1.875rem; font-weight: 700; margin: 0 0 4px; color: #0f172a; }
/* ⚠️ max-width IS RESET HERE ON PURPOSE, 26 August 2026. The rule further up this file
caps .rl__sub at 62ch, which measured 548px inside a 1229px panel, so the lede sat in
the first column whilst the heading above it ran the full width. Nicole spotted the
mismatch. 62ch is a sensible measure for a paragraph in a narrow column and wrong for
a lede under a full-width heading, so this overrides rather than edits the earlier
rule, which other surfaces still use. */
.gg-scope .rl__sub{ font-size: .875rem; line-height: 1.5; color: #64748b; margin: 0 0 32px; max-width: none; }
/* THE EYEBROW IS THE ONE TYPE STYLE THAT REPEATS EVERYWHERE ON THIS SURFACE.
text-xs font-bold uppercase tracking-widest text-brand, on every card title,
every rail label and the FAQ heading. Confirmed from source 2 September 2026,
all eight components on app/account/referrals carry exactly that string.
🔴 THE SENTENCE THAT USED TO END THIS COMMENT WAS FALSE AND IT HID A REAL DRIFT.
~~"--gg-blue is the calculator's own token and is the same #002ABF the portal's
--brand resolves to."~~ WRONG TWICE. The token is --color-brand, not --brand, and
app/globals.css line 621 resolves it to #06079c, not #002ABF. So every eyebrow on
this surface has been a different blue from the portal's since the rule was written.
BOTH BLUES EXIST IN THE PORTAL AND THEY HAVE DIFFERENT JOBS, which is why this was
easy to get wrong. #06079c is --color-brand, the brand palette, and its own comment
calls it the single source of truth that replaced the legacy Tailwind blue. #002ABF
is --gg-blue and lives in gradients, focus outlines and the StepNumber square, in
tabs.css, segment-bar.css and split-view.css. CONTROLS AND FOCUS RINGS, NOT TYPE.
⚠️ AND THE COMMENT IS WHY NOBODY CAUGHT IT. A rule that states its own correctness
is read instead of the thing it describes. This was found only because Nicole asked
what colour the portal uses.
── ⭐ AMBER NOW, 2 September 2026, NICOLE. THE BLUE ABOVE IS SUPERSEDED. ────────
~~color: #06079c~~ Her ruling: the eyebrow text on the referrals view changes to
amber, because the PORTAL's referrals view is changing to amber too. So this stays a
mirror rather than becoming a second design.
⚠️ LABELLED UNVERIFIED, IN THOSE WORDS. The portal source read today still carries
text-brand on all eight components on app/account/referrals, and amber was REMOVED
from that page on 11 August 2026. This colour therefore mirrors a portal state that
HAS NOT SHIPPED YET. It is on Nicole's word, which is the right authority, and it is
recorded as forward-looking so nobody reads their current source and calls this drift.
#92400e IS NOT A NEW COLOUR. It is Tailwind amber-800, which is the portal's most
used amber text by a distance, and it is already this file's amber in three places:
sp__eyebrow--am, which is literally the house amber eyebrow, and rl__badge twice.
🔴 AND IT CHANGES WHAT AMBER MEANS HERE, WHICH IS THE THING TO WATCH.
Nicole, 28 August, on the rl__scope chip further down this file: "Amber on this
surface means an offer or a warning: the POPULAR badge, the waitlist pill, the
accountability discount." THAT NOTE IS LEFT STANDING AND IS NOT DELETED, because its
reasoning about the chip is untouched. But amber is no longer reserved, so a future
chat CANNOT cite that line to turn these eyebrows back to blue. Only Nicole can. */
.gg-scope .rl__eyebrow{
font-size: .75rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .1em; color: #92400e; margin: 0;
}
/* ── ROW ONE: link, submit, earnings. Equal thirds, shared height. ──────── */
/* TWO PANES, NOT THREE. The Earnings pane was removed on 25 August, so the class is
renamed with it: a name that is only true in one branch is the same rot as a comment
that is only true in one branch, which is this file's own rule.
THE ACTION PANE IS THE WIDER OF THE TWO because it holds the picker, the field and
the button, whilst the link pane holds a line of text until a link exists. Equal
thirds were what made the link pane read as mostly empty. */
/* ⚠️ stretch AGAIN, AND THE ROUTE HERE MATTERS MORE THAN THE VALUE.
It was stretch, then start this morning, and stretch again this afternoon. That is not
indecision, it is the same rule applied to two different panels.
THE RULE: a stretched pair is as tall as its taller half, so it is only safe when the two
halves are close. It was not safe this morning: panel 01 held four short lines beside a
panel 02 carrying a form skeleton and a cover, and the left panel filled with air. 371px,
then 95px, then 171px across three attempted fixes. start removed it by letting each panel
size itself.
WHAT CHANGED SINCE: the registration form moved into an overlay, so panel 01 is a prompt
and a button, and panel 02 lost the mode pills to its header row and two thirds of its
skeleton. The two are now within a few dozen pixels of each other, so stretch costs almost
nothing and gives Nicole the matched pair she asked for.
⚠️ IF PANEL 02 EVER GROWS AGAIN, THIS GOES BACK TO start. The air is a symptom of the gap
between the two, not of this property, and the measurement is the thing to check rather
than the value. */
/* ⚠️ EQUAL COLUMNS, 1 SEPTEMBER 2026, AND THE HISTORY MATTERS BECAUSE THIS HAS MOVED TWICE.
~~0.85fr / 1.15fr~~ was right when the LEFT pane was the code panel.
~~1.15fr / 0.85fr~~ was right when the panes were Submit and What happens next, on the
portal lane's BRIEF: "Left, wider: Or hand us the details. Right: What happens next."
🔴 BOTH ARE SUPERSEDED BY THEIR SHIPPED PAGE, which Nicole ruled on over the brief. The pair
is What happens next beside the code panel, and on portal.gogorilla.com/partners/referrals
they measure 516px and 515px inside the same row. So equal, not weighted.
DO NOT REWEIGHT THIS WITHOUT MOVING THE PANELS TOO. Each of the three settings above was
correct for a different pair, and the tell that one is stale is which panels are inside it. */
.gg-scope .rl__panes{
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px; align-items: stretch; margin: 0 0 24px;
}
.gg-scope .rl__p6{ padding: 24px; }
.gg-scope .rl__col{ display: flex; flex-direction: column; }
/* mt-auto on their side: the button and the "N active referrals" line are
pushed to the foot of the card so all three panes agree at the baseline. */
.gg-scope .rl__push{ margin-top: auto; padding-top: 20px; }
.gg-scope .rl__shead{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gg-scope .rl__sharebtn{
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 10px;
font-size: .75rem; font-weight: 500; color: #334155; background: transparent;
}
.gg-scope .rl__sharechev{ width: 14px; height: 14px; }
.gg-scope .rl__note{ font-size: .875rem; line-height: 1.5; color: #64748b; margin: 4px 0 0; }
.gg-scope .rl__fine{ font-size: .75rem; line-height: 1.5; color: #94a3b8; margin: 8px 0 0; }
.gg-scope .rl__fig{ font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 8px 0 0; color: #0f172a; line-height: 1.1; }
.gg-scope .rl__fig--big{ margin: 12px 0 4px; }
.gg-scope .rl__fig--ok{ color: var(--gg-success, #0f8847); }
.gg-scope .rl__cap0{ font-size: .875rem; color: #64748b; margin: 0; }
.gg-scope .rl__strong{ font-weight: 600; color: #0f172a; }
/* ── THE PANEL: heading, rail, filters, table, count. ───────────────────── */
.gg-scope .rl__panel{ padding: 24px; display: flex; flex-direction: column; }
/* ~~.gg-scope .rl__phead{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }~~ FOLDED 4 September 2026. A PARTIAL duplicate.
align-items and gap here were already overridden by the later rule on source order, so only
flex-wrap and margin-bottom were still reaching the page. Both are now on the survivor. */
.gg-scope .rl__h2{ font-size: 1.125rem; font-weight: 700; margin: 0; color: #0f172a; }
.gg-scope .rl__filterline{ font-size: .875rem; color: #475569; margin: 0; }
.gg-scope .rl__linkbtn{ appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; color: inherit; cursor: pointer; }
/* The pipeline, four across, INSIDE the panel. Their 19 Aug arrangement: the
rail is the table's stage filter, so it belongs in the box with the table. */
.gg-scope .rl__rail{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.gg-scope .rl__cellbtn{
appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit;
text-align: left; cursor: pointer; display: block; height: 100%;
}
.gg-scope .rl__cellbtn:focus-visible{ outline: 2px solid var(--gg-blue, #002abf); outline-offset: 2px; border-radius: 18px; }
/* Overrides the older .rl__cell box above; the pane classes own the surface now.
DO NOT ADD `background` OR `border` HERE. Both are set by .gg-pane-1 and
.gg-pane-2, which sit at the same specificity — a declaration in this rule
wins on source order and would strip the fill off all four cells. Layout
only, and the older .rl__cell rule further up is already outranked by the
pane classes for everything else. */
.gg-scope .rl__cell{
display: flex; flex-direction: column; height: 100%; padding: 20px;
}
.gg-scope .rl__cell .rl__fig{ margin-top: 8px; }
.gg-scope .rl__cap{ margin: auto 0 0; padding-top: 8px; font-size: .875rem; line-height: 1.35; color: #475569; }
/* The filter row, all on one baseline: the search box has no visible label and
the four selects do, so without items:end the box floats above them. */
.gg-scope .rl__controls{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 12px; margin-bottom: 20px; }
.gg-scope .rl__search{ flex: 1 1 220px; min-width: 220px; }
.gg-scope .rl__searchbox{ position: relative; }
.gg-scope .rl__searchicon{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }
.gg-scope .rl__input--search{ padding-left: 36px; }
.gg-scope .rl__ctl{ display: block; }
.gg-scope .rl__clabel{ display: block; font-size: .75rem; font-weight: 500; color: #475569; margin-bottom: 4px; }
.gg-scope .rl__select{
appearance: none; border: 1px solid #cbd5e1; border-radius: 8px;
background: rgba(255,255,255,.7) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px;
padding: 8px 30px 8px 10px; font: inherit; font-size: .875rem; color: #0f172a; cursor: pointer;
}
.gg-scope .rl__export{ margin-left: auto; }
/* ~~.gg-scope .rl__sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
/* The table sits in its own level-1 pane inside the panel, overflow hidden so
the rows clip to the pane radius. */
.gg-scope .rl__tablepane{ overflow: hidden; }
.gg-scope .rl__tablewrap{ overflow-x: auto; border: 0; border-radius: 0; }
.gg-scope .rl__table{ width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; background: transparent; }
.gg-scope .rl__table thead{ background: rgba(248, 250, 252, .6); }
.gg-scope .rl__table th{
text-align: left; padding: 12px 16px; font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: #64748b;
border-bottom: 1px solid rgba(15, 23, 42, .08);
/* CARRIED ACROSS from the folded duplicate above, 4 September 2026. */
background: rgba(248,250,252,.6);
}
.gg-scope .rl__table td{ padding: 12px 16px; border-bottom: 1px solid rgba(15, 23, 42, .08); }
.gg-scope .rl__table tbody tr:last-child td{ border-bottom: 0; }
.gg-scope .rl__table tbody tr{ transition: background-color .15s; }
.gg-scope .rl__table tbody tr:hover{ background: rgba(15, 23, 42, .05); }
/* ~~.gg-scope .rl__empty{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; text-align: center; }~~
FOLDED 3 September 2026, group 2 of the duplicate sweep. A second base rule for
this selector IN THIS MEDIA CONDITION, fully dead on source order: every property it
set is re-declared below at equal specificity, so removing it changes nothing.
Proved by computing the effective declarations of EVERY selector in this sheet, media
condition included, before and after each group, and finding them identical.
Kept rather than deleted, because a deleted rule is one nobody is holding. */
.gg-scope .rl__foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.gg-scope .rl__count{ font-size: .875rem; color: #475569; margin: 0; }
/* Status pills, StatusBadge variant="referral". */
.gg-scope .rl__badge{ display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #fef3c7; color: #92400e; }
/* ── THE FAQ, full width under the panel. ───────────────────────────────── */
.gg-scope .rl__faq{ padding: 24px; margin-top: 32px; }
/* THE SIX .rl__faq ROW RULES WERE DELETED HERE, 26 August 2026, NOT LEFT DORMANT.
They dressed a hand-rolled accordion on this surface that turned out to duplicate
GMFaq, the house component this repo has carried all along and which the portal's
own GGAccordion is a verbatim port of. The FAQ now renders GMFaq and inherits
.gm-ov__faq* from app.v2.css, so these had no emitter left.
Deleted rather than kept, on the ggFillBlanks rule of 25 August: a rule kept just in
case is a second representation of one design waiting for somebody to reach for it.
.rl__faq and .rl__faqt survive, because the CARD and its eyebrow heading are still
ours; only the rows moved. */
.gg-scope .rl__faqt{
font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
color: var(--gg-blue, #002abf); margin: 0 0 16px;
}
/* ── The candidates tab. Their 3fr/2fr grid, ported off .gg-refskin. ────── */
.gg-scope .rl__cand{ display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.gg-scope .rl__candl{ display: flex; flex-direction: column; gap: 16px; }
/* ~~.gg-scope .rl__step{ display: flex; gap: 12px; margin-top: 18px; }~~ FOLDED 4 September 2026.
A PARTIAL duplicate, not a dead one: display and gap were identical to the later rule and
`margin-top: 18px` was live and carried across. It is now on the surviving rule below, so the
effective declarations are unchanged, proved by computing both before and after.
⚠️ THE ORDER WAS THE ONLY THING KEEPING IT CORRECT. Two base rules, same specificity, and
whichever came second won per property. Deleting the first without moving margin-top would
have silently dropped 18px from every step. */
.gg-scope .rl__stepn{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #eef2ff; color: var(--gg-blue, #002abf); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.gg-scope .rl__lockwrap{ position: relative; }
.gg-scope .rl__lockwrap > .rl__locked{ filter: blur(5px); pointer-events: none; user-select: none; }
/* ── Narrow. 1024 is the breakpoint the portal's own lg: prefix uses, so the
two stack at the same width rather than at two widths a hair apart. ───── */
@media (max-width: 1023px){
/* ⚠️ minmax(0, 1fr) AND NOT A BARE 1fr, WHICH IS WHAT STOOD HERE UNTIL 3 SEPTEMBER 2026.
~~.gg-scope .rl__panes{ grid-template-columns: 1fr; }~~
A bare 1fr is minmax(AUTO, 1fr), and the auto floor is the item's MIN-CONTENT width, so
the column cannot go narrower than its widest child however narrow the container gets.
Measured on the live page at a 375px viewport: this column computed 463.719px inside a
295px container and the step text was clipped mid-word. The base rule two hundred lines
up already writes minmax(0, 1fr) for exactly this reason, and .rl__rail on the next line
of THIS block writes repeat(2, minmax(0, 1fr)). Only the panes were left bare.
🔴 AND NOTHING CAUGHT IT because .gg-sos__glimpse--live above it is overflow-x: hidden,
so document.scrollWidth still reported 375 and every scripted overflow check passed.
It was found by opening the capture, not by measuring. */
.gg-scope .rl__panes{ grid-template-columns: minmax(0, 1fr); }
.gg-scope .rl__rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gg-scope .rl__cand{ grid-template-columns: 1fr; }
}
@media (max-width: 639px){
/* ⚠️ THIS RULE IS DEAD FOR EVERY INSTANCE THAT ACTUALLY RENDERS, AND IT IS ANNOTATED RATHER
THAN REMOVED. Measured in the live CSSOM at a 375px viewport on 3 September 2026: the rail
computes 115.5px 115.5px, TWO columns, not the one this line asks for.
IT LOSES ON SPECIFICITY, NOT ON ORDER, so moving it later fixes nothing. Line 2290 in this
file, inside @media (max-width: 720px), is `.gg-scope .rl__table-pane .rl__rail`, three
classes to this rule's two. That rule is correctly floored with minmax(0, 1fr), so THERE IS
NO VISUAL DEFECT HERE, only a line a reader would believe.
NOT DELETED, because it could not be proved harmless. On the signed-out referrals view the
rail renders exactly ONCE and always inside .rl__table-pane, so this never wins there. It
was NOT proved that no other state renders a rail outside that pane, and deleting on an
unproved negative is how a live declaration gets dropped. See the .rl__channel fold earlier
today, where exactly that nearly happened.
⚠️ AND A SOURCE SCAN WILL NOT FIND THE RULE THAT BEATS THIS ONE. Looking for the exact
selector `.gg-scope .rl__rail` misses a descendant variant entirely. The browser found it
and the source read did not. */
.gg-scope .rl__rail{ grid-template-columns: 1fr; }
.gg-scope .rl__export{ margin-left: 0; }
}
/* The "(optional)" span inside .rl__flabel. The field() factory in
signed-out-sidebar.jsx emits this class and SubmitReferralForm.tsx carries the
word as a lighter run inside the label rather than as separate text beside it,
but no rule was ever written for it, so it inherited the label's 600 weight and
read as part of the field name. Weight and colour only; the span is inline. */
.gg-scope .rl__fopt{ font-weight: 400; color: #94a3b8; }
/* ══ REFERRALS PANE DEPTH — REVERTED 25 AUGUST 2026 ══════════════════════════
Nicole's ruling, after comparing this surface with the portal's own referrals page.
WHAT WAS HERE. Two levels of pane, scoped to .rl: level 1 tinted to a warm neutral
at .86 falling to .74, level 2 cells raised to near white. It was built to answer
Alexander's "it isnt layered" and it did make a hierarchy.
WHY IT WENT. It made us DIVERGE FROM THE PORTAL, which is the one thing this
surface is not allowed to do. Checked against their repo rather than assumed:
components/glass/glass.css line 41 still defines .gg-pane-1 as
rgba(255, 255, 255, 0.55) with the same blur and the same shadow, unchanged. They
never moved. Our port was already correct and the tint was a local deviation from
it dressed up as a fix.
WHAT THE REAL DIFFERENCE WAS, and it is worth being precise because the tint was
aimed at the wrong thing. The panes were always identical to theirs. The GROUND
behind them differed, which is what c71125ed fixed and that fix STAYS: four
backdrop layers on the element rather than one flat wash. A pane with nothing to
refract reads flat however you colour it.
SO THE PANES ARE THE SHARED .gg-pane-1 PORT AGAIN, with no local override, and any
future change to their depth belongs in the portal's component so both surfaces
move together. */
/* ══ RAIL TOOLTIPS ════════════════════════════════════════════════════════════
2026-08-25. Loom 20 at 09:16: "there should be side tooltips, maybe with a
pointy arrow, so you go on this, tooltip, tooltip, tooltip." Nicole scoped it to
the rail items on the left.
IN THIS FILE RATHER THAN app.v2.css, DELIBERATELY. The rail itself is styled in
app.v2.css because it mirrors FreelancerRail.tsx and re-syncs against it. These
tips are ours and exist only on the signed-out surface, so they live beside the
other .gg-sos overrides where a future rail re-sync will not have to step around
them. app.v2.css is also the shared production stylesheet at vv952 and this
change has no business widening its blast radius.
NO CLIPPING TO FIGHT, CHECKED BEFORE BUILDING. .gg-sos__rail is
position: fixed, width 96px, z-index 40, and sets NO overflow, so an absolutely
positioned child paints outside the rail box. It sits above the glimpse, which
is z-index 39. The one thing the item was missing is position: relative, which
it never needed until now.
CSS ONLY, NO STATE. The tip is a child of the button, so :hover and
:focus-visible on the button drive it with no listener, no portal and no React
state to get out of step with the pointer. focus-visible is not decoration here,
it is the only way a keyboard reaches these at all.
POINTER IS A ROTATED SQUARE, not a border triangle, because the tip has a
1px border and a shadow and a border triangle cannot carry either. */
.gg-scope .gg-sos__item{ position: relative; }
/* ⚠️ RESTYLED 25 AUG, SAME DAY, AND THE FIRST VERSION WAS OFF BRAND.
I shipped these as a navy card with a rotated-square pointer. Nicole challenged
the colour and she was right. Every tooltip in this product is a WHITE card:
.dis-tip, .info-tip-portal, .step-lock-tip, .wl-tip, .summary__total-tip,
.addon__capacity-tip and the step-indicator tips are all #ffffff on #4b5563 or
#374151, and there is not one dark tooltip anywhere in app.v2.css. Mine was the
only one in the codebase, which is the definition of off brand.
AND ALEXANDER SAID SO IN THE ASK. Loom 20 at 09:16 is "a bit like we've got
tooltips HERE" - a pointer at the existing component, not a request for a new
one. I read it as a request for tooltips and invented a style. Reuse, not
reinvention, and this file already had the answer.
EVERY VALUE BELOW IS .dis-tip's, at app.v2.css:2494, not chosen here. If that
component is restyled, this should be restyled with it rather than drifting.
THE CARET IS THE CANONICAL TWO-PIECE BORDER TRIANGLE, not my rotated square.
My commit message claimed a border triangle cannot carry a 1px border, which is
why I reached for a square. That is wrong, and the house solved it long ago:
::before draws a 7px triangle in the border colour, ::after draws a 6px white
one over it offset by 1px, and the sliver that shows through IS the hairline.
This is the --right variant that did not exist, built from the --above and
--below pair rather than freehand.
Z-INDEX STAYS SMALL ON PURPOSE. .dis-tip uses 2147483647 because it is portalled
to the document root and has to beat everything. This one is a child of the rail,
which is its own stacking context via backdrop-filter, so the tip only ever
competes with its six sibling items and a large value would be cargo cult. */
.gg-scope .gg-sos__tip{
position: absolute; left: calc(100% - 2px); top: 50%;
transform: translate(-4px, -50%);
z-index: 3;
width: 220px;
padding: 0.65rem 0.8rem;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 10px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
font-size: 0.73rem; line-height: 1.45; font-weight: 400;
color: #4b5563;
text-align: left; white-space: normal; letter-spacing: 0; text-transform: none;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* The hairline half of the caret. */
.gg-scope .gg-sos__tip::before{
content: ''; position: absolute;
right: 100%; top: 50%; transform: translateY(-50%);
border: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.09);
border-left-width: 0;
}
/* The white fill, one pixel over it, leaving the hairline showing as an edge. */
.gg-scope .gg-sos__tip::after{
content: ''; position: absolute;
right: calc(100% - 1px); top: 50%; transform: translateY(-50%);
border: 6px solid transparent;
border-right-color: #ffffff;
border-left-width: 0;
}
.gg-scope .gg-sos__item:hover > .gg-sos__tip,
.gg-scope .gg-sos__item:focus-visible > .gg-sos__tip{
opacity: 1; visibility: visible;
transform: translate(6px, -50%);
transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
/* NO PHONE RULE IS NEEDED HERE, AND I WROTE ONE BEFORE CHECKING. Recorded because
the wrong version was plausible. I added a max-width: 900px rule to hide the tip,
on the assumption that the rail becomes a bottom bar at that width and a
right-anchored tip would land off screen. Both halves were wrong. The breakpoint
is 820px, and at 820px the rail is not a bottom bar, it is display: none
outright, on Nicole's 10 August ruling that phones do not get the preview rail at
all because .mobile-bar covers it at z-index 60 and made all seven items
unhittable. A child of a display: none ancestor is already gone, so the rule
guarded a state that cannot occur. The bottom-bar rules above that block in
app.v2.css are deliberately kept dead code, which is what made the wrong
assumption so easy to reach by skimming. */
/* Reduced motion keeps the tooltip, drops the travel. It is an affordance, not an
animation, so removing it entirely would remove the information. */
@media (prefers-reduced-motion: reduce){
.gg-scope .gg-sos__tip{ transition: opacity .01s linear, visibility 0s linear .01s; transform: translate(6px, -50%); }
.gg-scope .gg-sos__item:hover > .gg-sos__tip,
.gg-scope .gg-sos__item:focus-visible > .gg-sos__tip{ transform: translate(6px, -50%); }
}
/* ══ THE COARSE SERVICE PICKER ════════════════════════════════════════════════
2026-08-25. FREELANCER 20 at 21:47 asked for the services at a coarse grain,
shown back as tags. It shipped as nine chips in a grid and Nicole changed it to a
dropdown the same day, with Vercel's Environments picker as the reference: nine
chips made the middle pane far taller than the two beside it, and the trio is
stretched to a shared height, so the whole row grew to fit one panel.
THE PANEL IS TRACED FROM .bd-commit-menu IN app.v2.css, our own dropdown, so this
is not a fifth panel style in the product. Same white, same 10px radius, same
shadow, same blue at 0.07 for hover and 0.10 for selected. Traced rather than
reused by class because that component lives in the shared production stylesheet
and this surface should not start depending on the commitment picker.
THE PORTAL'S OWN PICKER COULD NOT BE REUSED. QuickLinksPicker.tsx is a Radix
Popover, and this repo loads React and Babel from a CDN with no build step, so
Radix is not available. Its own doc block records that it is a Popover only
because drag-to-reorder was asked for, and that it began as a dropdown menu with
checkbox items. We need no reordering, so the earlier shape is the right one. */
/* The trigger. Sized and coloured as the white checkout field, which is the input
treatment Nicole ruled for every typing field on 14 August, so a control that sits
directly above a real input does not read as a different species. */
/* ⚠️ THE MENU PAINTED BEHIND THE FORM AND EVERY DOM CHECK PASSED. Fixed 25 Aug 2026.
The panel is z-index 30 and the fields behind it are 2, so on paper it wins. It did
not, and the cause is one line in app.v2.css that has nothing to do with this
component: `.gg-pane-1 > *` sets `position: relative; z-index: 2` on every direct
child of a pane. .rl__dd is a direct child, so it inherits a NON-AUTO z-index whilst
positioned, which makes it A STACKING CONTEXT. The menu's 30 is then scoped inside
.rl__dd and competes with nothing, whilst the form, a later sibling at the same
z-index 2, paints over it.
PROVED, NOT REASONED: elementFromPoint at the centre of the open menu returned
.rl__fine, the fine print behind it.
THE FIX IS TO RAISE .rl__dd ITSELF, because a stacking context can only be escaped by
its parent. Scoped `.rl__p6 > .rl__dd` at (0,3,0) so it beats `.gg-pane-1 > *` at
(0,2,0) outright rather than depending on which stylesheet loads last.
SAME FAMILY AS THE 19 AUGUST BUG ON THIS SURFACE, where .gg-sos__live had no position
and its children lost to a pseudo-element that came later in paint order. A z-index
is a claim about a stacking context, and the context is usually somewhere else. */
.gg-scope .rl__dd{ position: relative; margin: 0.75rem 0 0; }
/* ⚠️ THIS FIX WAS SCOPED TO A PARENT AND THE PARENT CHANGED. Rewritten 25 Aug.
The first version was `.rl__p6 > .rl__dd`, which worked until the picker moved into
.rl__pickpanel for the two-column layout. The selector then matched nothing, the
dropdown fell back to the z-index 2 it inherits, and the menu painted UNDER its own
later siblings again: measured, elementFromPoint returned rl__tags, rl__flabel and
rl__tiers through the open menu.
SO IT NO LONGER NAMES AN ANCESTOR. The doubled class is the smallest way to beat the
(0,2,0) rule that sets z-index 2 on pane children without tying this to whichever
container the picker happens to live in next. A stacking fix that depends on the
parent's class is a fix with an expiry date. */
.gg-scope .rl__dd.rl__dd{ z-index: 5; }
/* AND THE SAME BUG ONE LEVEL UP, WHICH THE FIRST FIX DID NOT REACH. I raised .rl__dd,
confirmed the top of the menu was now on top, and the BOTTOM of it was still covered
by the Your referrals panel below. .rl__panes is itself a direct child of
.gg-section-base, so it takes position relative with z-index 2 from that pane rule
too, and is therefore ITS OWN stacking context. Everything I did inside it was
invisible to the comparison that actually mattered, which is .rl__panes against
.rl__panel, two siblings at the same z-index where the later one in the DOM wins.
THE RULE, AND IT IS THE REUSABLE PART: fix stacking at the level where the two
elements you are comparing are SIBLINGS. I stopped at the first stacking context I
found rather than walking up to the common ancestor, so I fixed a real problem that
was not the whole problem and reported it as done. Walk the chain to the common
ancestor and print it, exactly as the 19 August note on this surface says for
filter, opacity and pointer-events. */
.gg-scope .gg-section-base > .rl__panes{ z-index: 6; }
/* THE ADD-ONS BAR SHAPE, per Nicole 25 Aug. Traced from the collapsed add-ons row on
the calculator: plus square, bold count, blue chip, chevron at the far right, on a
taller white bar with a soft ring rather than a plain 1px input border. Same visual
sentence as the control it sits beneath, which is the point of tracing rather than
inventing a second row idiom for the same job. */
.gg-scope .rl__ddbtn{
width: 100%; display: flex; align-items: center; gap: 0.6rem;
appearance: none; cursor: pointer; text-align: left;
background: #ffffff;
border: 1px solid rgba(15,23,42,0.10);
border-radius: 12px;
padding: 0.72rem 0.85rem;
font-size: 0.85rem; font-weight: 700; line-height: 1.3; color: #0f172a;
box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.045);
transition: border-color .14s ease, box-shadow .14s ease;
}
.gg-scope .rl__ddplus{
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,42,191,0.07); border: 1px solid rgba(0,42,191,0.16);
color: var(--gg-blue, #002abf); font-size: 0.95rem; font-weight: 700; line-height: 1;
}
.gg-scope .rl__ddlbl{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The chip is the add-ons bar's "4 available without a plan" in the same blue tint. */
.gg-scope .rl__ddchip{
flex: 0 0 auto; display: inline-flex; align-items: center;
background: rgba(0,42,191,0.08); color: var(--gg-blue, #002abf);
font-size: 0.72rem; font-weight: 600; border-radius: 5px; padding: 2px 7px;
}
.gg-scope .rl__ddbtn:hover{ border-color: rgba(0,42,191,0.35); }
.gg-scope .rl__ddbtn.is-open,
.gg-scope .rl__ddbtn:focus-visible{
border-color: rgba(0,42,191,0.55);
box-shadow: 0 0 0 3px rgba(0,42,191,0.12);
outline: none;
}
/* The placeholder is lighter than a chosen value, which is the only thing telling a
reader at a glance whether they have answered this yet. */
.gg-scope .rl__ddbtn.is-open{ box-shadow: 0 0 0 3px rgba(0,42,191,0.12); }
.gg-scope .rl__ddchev{ flex: 0 0 auto; width: 14px; height: 14px; color: #64748b; transition: transform .16s ease; }
.gg-scope .rl__ddbtn.is-open .rl__ddchev{ transform: rotate(180deg); }
/* The panel, from .bd-commit-menu. z-index 30 is its value too, and it sits inside
.gg-sos__live which is z-index 1, so it clears the panes without touching the rail. */
/* The read-back. A dropdown hides the answer the moment it closes, so these are what
keeps it visible, which is the "shows here as tags" half of the ask. Not
interactive: the dropdown is the one place the selection changes. */
/* .rl__tags / .rl__tag / .rl__tag--more WERE DELETED 26 AUGUST 2026. The chosen
services stopped being a read-back and became the switcher, so they are now
.qual-pill inside a .qualifier-q__opts--pills row, which is the component Nicole
named and which app.v2.css:11771 already defines. The rules are removed rather than
left dormant, because a dormant rule for a replaced shape is how the replaced shape
returns: the next person to write className 'rl__tag' gets a styled chip and no
error, and this surface quietly has two pill designs again.
ONLY THE MARGIN IS OURS. Everything else about these pills, the fill, the border, the
radius, the selected inversion, comes from app.v2.css and must keep coming from
there. */
.gg-scope .rl__svcpills{ margin: 0.6rem 0 0; }
/* ── THE DEDICATED RESOURCES PANEL ────────────────────────────────────────────
26 Aug 2026, THIRD version. Layout ONLY. The dropdown is .rl__dd*, the checkbox is
.rl__ddbox (traced from the portal's options popover in August) and the small
control on the header row is .bd-commit-pill. NOTHING HERE RESTATES A BORDER, A
RADIUS OR A COLOUR ON ANY OF THEM.
WHAT THE TWO EARLIER VERSIONS GOT WRONG, kept short because both are gone: a
native