/* ============================================================================
   ⚠️ MOVED 1 SEPTEMBER 2026. This styled the segmented control when it lived in PANEL 02's
   header. That control is now TWO TABS in the PAGE header beside the Referrals title, on the
   portal lane's arrangement, and the labels read "Refer a business" and "Refer a candidate".
   THE SELECTORS DID NOT CHANGE, which is why this file did not have to. It still overrides
   .rl__modes / .rl__mode in sos-previews.css and every selector still matches character for
   character. Only the markup's position moved.
   THE HEADER LAYOUT RULE IS NOT HERE. .rl__hrow becoming a flex row lives in sos-previews.css
   where .rl__hrow is defined. PR #44 put unrelated layout in this file on 28 August and was
   closed for it.

   REFERRALS, the "Refer a business / Refer a candidate" segmented control.

   Overrides the .rl__modes / .rl__mode block in assets/sos-previews.css.
   Loaded AFTER it in index.html, and every selector here is character for
   character the same as the one it overrides, so it wins on source order.
   Do not add extra classes or !important to force it: if this file stops
   winning, the cause is the <link> order in index.html, fix it there.

   The look is ported from gogorilla-platform, components/tabs/tabs.css, the
   GGTabs component. Recessed grey well, neumorphic grey pills, glossy brand
   blue for the selected one.

   🔴 THE FULL SCALE, NOT --sm, FROM 1 SEPTEMBER 2026. Nicole: "the tab size is not correct."
   ~~The --sm scale was used (7px 13px padding, 13px text, 10px radius) because the full scale
   is a 44px pill built for primary nav, which would tower over this PANEL HEADER.~~
   THAT REASON DIED WHEN THE TABS LEFT THE PANEL HEADER. They are the page's own tab row under
   the title now, which is exactly where the portal uses the FULL scale. Read out of their
   tabs.css rather than guessed: .gg-tab is padding 14px 19px, font-size 14.4px, weight 600,
   line-height 1, radius 12px; .gg-tabs is padding 6px, radius 16px, gap 8px.
   THEIR OWN NOTE ON THE PADDING IS WHY IT IS 14px AND NOT 13px: the box is line-height 1 on
   14.4px plus 1px of border each side, so the padding has to carry 44 - 14.4 - 2 = 27.6px to
   reach a 44px tap target. 13px lands at 42.4px. DO NOT ROUND THESE.

   The two properties the guard test cares about, align-self: flex-start on
   the track and the .rl__shead flex-wrap rules, are NOT touched here.
   align-self is restated below only so the track keeps hugging its content
   inside the flex column, it is the same value sos-previews.css already sets.

   Added 28 Aug 2026, branch feat/referral-mode-tabs-raised.
   ========================================================================= */

/* The well. Recessed tray the pills sit in: a top-down grey gradient with an
   inset shadow at the top edge and a white lip at the bottom, which is what
   sells the "carved out" read. */
/* ⚠️ WRAP AND CAP, MIRRORING THEIR .gg-tabs, ADDED 3 SEPTEMBER 2026.
   components/tabs/tabs.css on the portal declares display:flex, flex-wrap:wrap,
   width:fit-content, max-width:100%. Ours had the flex and neither of the other two, so at a
   375px viewport the strip held its full 342px, and the strip plus the 8px gap plus the 13px
   tooltip marker came to 363px inside a 343px row. FOUR PIXELS OF THE MARKER WERE CLIPPED.
   Nicole ruled the wrapping option on 3 September, over the alternative of wrapping the outer
   group, which stopped the clipping but dropped the marker onto its own line looking orphaned.
   Measured after: strip 322px, the two tabs stacked, marker inline and inside the viewport.
   ⚠️ width:fit-content IS DELIBERATELY NOT COPIED. It was tried live and changed nothing here,
   so it is not carried over as cargo. If the strip's trailing space is ever addressed, that is
   a design question for Nicole and not a missing property. */
.gg-scope .rl__modes{
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-self: flex-start;
  gap: 8px;
  padding: 6px;
  margin: 0 0 0.9rem;
  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);
}

/* Shared pill geometry. line-height: 1 is deliberate, the platform sizes
   these pills off the text box plus padding, so any inherited line-height
   would silently change the height. */
.gg-scope .rl__mode{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  padding: 14px 19px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

/* Unselected. Grey pill lit from the top left, five shadow layers: two inset
   highlights, two inset shades, one cast shadow. Flattening this to a single
   shadow loses the raised read entirely. */
.gg-scope .rl__mode:not(.rl__mode--on){
  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 .rl__mode:not(.rl__mode--on):hover{
  background: linear-gradient(109deg, #eeeeee 13%, #eaeaea 100%);
  color: #111111;
  transform: translateY(-1px);
}

.gg-scope .rl__mode:not(.rl__mode--on):active{
  transform: translateY(0);
}

/* Selected. Brand blue gradient plus the GGButton primary shadow stack,
   verbatim from --gg-btn-primary-shadow in the platform's tokens.css. */
.gg-scope .rl__mode--on{
  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);
}

/* Focus ring. An outline rather than a box-shadow, because the pills already
   spend their box-shadow budget on the bevel and a sixth layer would be
   swallowed by the inset ones. */
.gg-scope .rl__mode:focus-visible{
  outline: 2px solid var(--gg-blue, #002abf);
  outline-offset: 2px;
  box-shadow: none;
}

.gg-scope .rl__mode--on:focus-visible{
  outline: 2px solid var(--gg-blue, #002abf);
  outline-offset: 2px;
  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);
}

.gg-scope .rl__mode:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Respect a reduced-motion preference: keep the colour change, drop the lift. */
@media (prefers-reduced-motion: reduce){
  .gg-scope .rl__mode{ transition: background 150ms ease, color 150ms ease; }
  .gg-scope .rl__mode:not(.rl__mode--on):hover{ transform: none; }
}