/* ─────────────────────────────────────────────────────────────────────────────
   REFERRAL SERVICES ACCORDION
   Added 28 Aug 2026, branch feat/referral-services-accordion.

   WHY A NEW FILE RATHER THAN MORE OF sos-previews.css. That file already carries
   the .rl__dd* dropdown, which the DEDICATED roles picker still uses and must
   keep using. Editing it in place risks a second base-level rule for a class the
   guard suite counts (test/referral-sidebar-matches-the-calculator.test.js
   asserts each of rl__ddbox, rl__ddmenu, rl__ddopt, rl__ddbtn, rl__fam is styled
   at most once outside a media query). Everything here is a NEW class, plus a
   handful of compound selectors that reach the shared ones without redeclaring
   them, so nothing in that count moves.

   MUST BE LINKED LAST in index.html. The compound selectors below are the same
   weight as the ones they refine, so they win on source order only. If this file
   stops winning, the cause is the <link> order, and that is where to fix it.

   THE VOCABULARY IS THE DROPDOWN'S, NOT A NEW ONE. Same white card, same
   rgba(15,23,42,0.10) hairline, same 12px radius, same two-layer shadow and the
   same .14s ease as .rl__ddbtn, because the row IS the old trigger, once per
   service instead of once for the list.
   ───────────────────────────────────────────────────────────────────────────── */

.gg-scope .rl__svclist{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0.75rem 0 0;
}

/* THE HEAD IS FLAT, NOT A CARD. It reports what the family holds and how much of
   it is picked. Making it look like a row would invite a click that does
   nothing, which is the mistake the muted options used to make. */
.gg-scope .rl__svchead{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 2px 2px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
}
.gg-scope .rl__svchead .rl__ddlbl{ flex: 1 1 auto; min-width: 0; }

.gg-scope .rl__svclist .rl__ddeyebrow{
  border-top: 0;
  padding: 2px 4px 2px;
}

/* THE SELECTED EYEBROW, above the pills row rather than inside the list. Same
   component as AVAILABLE so the two halves read as one list, but it heads a row
   that is not part of the list, so it drops the shared border-top and takes a
   margin instead: a rule between the accordion and the pills would draw a line
   across the panel and split it into two controls, which is what having no label
   made it look like in the first place. */
.gg-scope .rl__svceyebrow{
  border-top: 0;
  margin: 14px 0 0;
  padding: 0 4px 2px;
}

/* ── THE ROW ──────────────────────────────────────────────────────────────── */
.gg-scope .rl__svcrow{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  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__svcrow:hover{ border-color: rgba(0, 42, 191, 0.35); }

/* ── THE ROW'S GLASS BEVEL ────────────────────────────────────────────────────
   The 14px thin glass frame, on every row in every family: Growth, Creative,
   Talent, Agency, and the Not sure yet row that shows in all of them.

   WHY THIN AND NOT REGULAR. app.v2.css:9083 documents the pairing: use
   .glass-frame (22px) on an outer container and .thin-glass-frame (14px) on the
   children nested inside it. These rows sit inside .refer-who-select.glass-frame,
   so they are the children and 14px is their weight. 22px on a 44px-tall row
   would have the top and bottom bevels meet in the middle.

   WHY THIS IS A COPY OF .thin-glass-frame::before RATHER THAN THAT CLASS. The
   row is built in src/signed-out-sidebar.jsx as a React.createElement string
   className, and that file is 283KB; COLLABORATION.md records it being silently
   truncated four times by whole-file writes. sos-previews.css:406 made the same
   call for .rl__pane and .rl__cell and said so in the same words. If you are in
   that file anyway, append ' thin-glass-frame' to the className at line 2904 and
   delete this block: the class is the better expression of it.
   DRIFT WARNING: because it is a copy, a change to .thin-glass-frame in
   app.v2.css will NOT reach these rows. The declarations below are verbatim
   from app.v2.css:9048 as of 28 Aug 2026.

   THE CHILD LIFT IS PART OF THE COMPONENT, not an extra. The bevel is a
   positioned ::before at z-index 1, so without it the 14px band would paint over
   the checkbox, which starts 13.6px in from the row's left edge.

   AND IT IS SAFE FOR THE COMMITMENT MENU, which is the thing the body comment
   below is protecting. The lift gives .rl__svcbody position: relative, and a
   positioned element IS a containing block for absolutely positioned
   descendants, so this is worth stating plainly: the menu is absolutely
   positioned inside .svc__tier-label-row.rl__tierrow, and sos-previews.css:1337
   already gives THAT element position: relative and z-index 4. It is the nearer
   positioned ancestor, so it stays the menu's containing block and nothing
   moves. Note position is not one of the three properties the body comment
   forbids: overflow, transform and filter would each clip the menu, and none of
   them appears here.
   ─────────────────────────────────────────────────────────────────────────── */
.gg-scope .rl__svcrow{
  position: relative;
}
.gg-scope .rl__svcrow::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__svcrow > *{ position: relative; z-index: 2; }

/* SELECTED AND OPEN ARE TWO DIFFERENT STATES and they read differently on
   purpose. A service can be picked and closed, which is the resting state once
   somebody has chosen several, so is-on has to say something on its own. */
.gg-scope .rl__svcrow.is-on{ border-color: rgba(0, 42, 191, 0.30); }
.gg-scope .rl__svcrow.is-open{
  border-color: rgba(0, 42, 191, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 42, 191, 0.12), 0 8px 22px -12px rgba(44, 51, 102, 0.28);
}

/* A MUTED ROW IS UNSELECTABLE, so it must not offer a pointer or a hover lift.
   The reason it cannot be picked travels in .rl__ddwhy beside the name rather
   than in a note under the forecast. */
.gg-scope .rl__svcrow.is-muted{
  background: #fbfbfc;
  box-shadow: none;
}
.gg-scope .rl__svcrow.is-muted:hover{ border-color: rgba(15, 23, 42, 0.10); }

/* A muted row keeps the bevel but at half strength. Dropping it entirely would
   make the row a different component rather than a disabled one, and leaving it
   at full strength reads as available. */
.gg-scope .rl__svcrow.is-muted::before{ opacity: 0.5; }

.gg-scope .rl__svcrowbtn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
  color: #0f172a;
}
.gg-scope .rl__svcrowbtn:disabled{ cursor: default; }
.gg-scope .rl__svcrowbtn:focus-visible{
  outline: 2px solid rgba(0, 42, 191, 0.55);
  outline-offset: -2px;
}

.gg-scope .rl__svcname{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gg-scope .rl__svcrow.is-on .rl__svcname{ font-weight: 700; }
.gg-scope .rl__svcrow.is-muted .rl__svcname{ color: #94a3b8; }

/* The chip reports the tier the row is set to, so a closed row still says what
   was chosen inside it. Amber rather than blue: it is a read-back of a choice,
   not another thing to press. */
.gg-scope .rl__svcchip{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: rgba(252, 157, 43, 0.14);
  color: #b85e0a;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Reaching the shared checkbox through the row, so its own rule keeps its single
   base-level definition in sos-previews.css. */
.gg-scope .rl__svcrowbtn:hover .rl__ddbox{
  border-color: #6b82d6;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .06),
              2px 2px 6px rgba(0, 0, 0, .08),
              -1px -1px 3px rgba(255, 255, 255, .8);
}
.gg-scope .rl__svcrowbtn:disabled:hover .rl__ddbox{
  border-color: #e2e2e2;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .06),
              1px 1px 3px rgba(0, 0, 0, .06),
              -1px -1px 2px rgba(255, 255, 255, .7);
}

/* The chevron is the dropdown's own, and it turns on the ROW's open state
   because there is no .rl__ddbtn here to carry is-open. */
.gg-scope .rl__svcrow .rl__ddchev{
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #64748b;
  transition: transform .16s ease;
}
.gg-scope .rl__svcrow.is-open .rl__ddchev{ transform: rotate(180deg); }

/* ── THE BODY ─────────────────────────────────────────────────────────────────
   NO overflow: hidden, NO transform, NO filter ON THIS ELEMENT. The commitment
   menu is absolutely positioned out of .svc__tier-label-row.rl__tierrow, which
   sos-previews.css raises to z-index 4 precisely so it can escape. Any of those
   three properties would make this a clipping or containing block and the menu
   would be cut off at the row's edge. That is also why the row opens by mounting
   rather than by animating a height: a height transition needs a clip.

   The row's glass bevel gives this element position: relative via the child
   lift. That is fine, and the reasoning is written out at the bevel block above:
   .rl__tierrow is already positioned, so it, not this, stays the menu's
   containing block.
   ─────────────────────────────────────────────────────────────────────────── */
.gg-scope .rl__svcbody{
  padding: 0 0.85rem 0.9rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  margin-top: 2px;
  padding-top: 0.7rem;
  /* backwards, NEVER both. A fill-mode of both RETAINS the final keyframe forever, and a
     filling animation outranks normal declarations, so `transform: none` in the to-frame
     computes as an identity matrix that never goes away. An element with any transform is
     a containing block for absolutely positioned descendants, and the commitment menu is
     exactly that: it would start positioning against this row instead of the tier label
     row it belongs to. index.html records the same trap costing a dead hover on the client
     type cards, 7 Aug 2026. There is no animation-delay here, so backwards holds nothing
     and simply releases the element when the run ends, which is all this needs. */
  animation: rl-svcbody-in .16s ease-out backwards;
}

@keyframes rl-svcbody-in{
  from{ opacity: 0; transform: translateY(-3px); }
  to{ opacity: 1; transform: none; }
}

/* The first thing in the body is the Available tiers label, which carries its
   own top margin for the old layout. Inside a row that reads as a gap. */
.gg-scope .rl__svcbody .rl__tierrow{ margin-top: 0; }

@media (prefers-reduced-motion: reduce){
  .gg-scope .rl__svcbody{ animation: none; }
  .gg-scope .rl__svcrow .rl__ddchev{ transition: none; }
}

@media (max-width: 560px){
  .gg-scope .rl__svcrowbtn{ padding: 0.65rem 0.7rem; gap: 0.5rem; }
  .gg-scope .rl__svcbody{ padding-left: 0.7rem; padding-right: 0.7rem; }
  .gg-scope .rl__svcchip{ display: none; }
}