/* ============================================================================
   REFERRALS, panel 02, "A business / A person" 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 --sm scale is 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.

   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. */
.gg-scope .rl__modes{
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  padding: 5px;
  margin: 0 0 0.9rem;
  border-radius: 13px;
  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: 6px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  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; }
}