/* ==========================================================================
   THE SELECTED CLIENT CARD, IN THE WORK BAND
   Applied 2026-09-08. Styling only — no markup, no script, no geometry.

   THE BUG
   gads-clients/active.css already paints the chosen client card with a light
   tint of the section's blue (`--ac-bg`) on a matching edge (`--ac-edge`).
   On the homepage it never showed: wk-finish.css gives every card in the band
   one shape —

       .tail.show .gah .mp-i { background: var(--wk-face);      (0,4,0)
                               border: 1px solid var(--wk-edge) }

   — which is the SAME specificity as active.css's

       .cc.rz6 .mp-i.is-sel  { background: var(--ac-bg) }        (0,4,0)

   and wk-finish.css is linked ~7600 lines later, so at a tie the later rule
   won and the open card stayed pure white on the resting hairline: identical
   to the nine cards around it. Only the little arrow changed colour.

   THE FIX
   The same two values, re-stated one class heavier so the band's own card
   shape cannot flatten them. Nothing new is invented: `--ac-bg` / `--ac-edge`
   are active.css's tokens, declared on `.cc.rz6`, which is the class list
   EVERY rail in this band carries — the Google Ads section in the markup and
   the four `wt-gah` panels wt-rail.js builds (see its SECTION constant). So
   one rule covers every client in every tab, not just Google Ads, and matches
   what google-ads.html has always drawn.

   `.card.is-sel` is here for the same reason: `window.WT_VARIANT.style` can
   swap all four of those tabs from the row card to the preview card, and a
   selected preview card must fill the same way. It costs nothing today
   (`click:"static"` builds no selectable card outside Google Ads) and means
   the selected state is never re-implemented per variant.

   The shadow is deliberately left as the band's `--wk-rest`, not removed:
   the chosen card sits in a row of cards that all carry it, and taking it off
   the one that is open makes it look pressed into the page rather than
   selected. The fill and the edge carry the state.
   ========================================================================== */

.tail.show .gah .mp-i.is-sel,
.tail.show .gah .mp-i.is-sel:hover,
.tail.show .gah .mp-i.is-sel:focus,
.tail.show .gah .mp-i.is-sel:focus-visible,
.tail.show .gah .card.is-sel,
.tail.show .gah .card.is-sel:hover,
.tail.show .gah .card.is-sel:focus,
.tail.show .gah .card.is-sel:focus-visible{
  background: var(--ac-bg, #EAF2FD);
  border-color: var(--ac-edge, #BAD5F8);
}

/* The RESTING and HOVER cards are deliberately not touched. active.css also
   declares a hover tint (`--ac-hov`) that wk-finish.css out-orders here, and
   restoring it would have been easy — but the brief is the selected state
   only, and a card that tints under the pointer is a different change to the
   one that was asked for. It stays as the band draws it today. */

/* ---- the connector, tied to the card it belongs to ----------------------
   The notch is `.mp-panel::before` — a 12px square rotated 45deg, carrying a
   border on its top and left only, so after the rotation the two UPPER sides
   are drawn and the two lower ones are not. desk.js parks its centre on the
   open panel's top edge at the horizontal centre of the selected card
   (`--rz-notch`), so the outlined half rises into the gap under the card and
   the undrawn half falls inside the panel: a pointer from one to the other.

   That only works while the fill matches what is BEHIND the lower half. It is
   `.mp-card`, which is `var(--paper)` — plain white. The notch was #F7FAFF, a
   half-step off it, and the mismatch drew a faint outline across the bottom of
   the pointer; painting it in the new selected fill made that outline a hard
   edge and the connector read as a diamond floating in the gap rather than as
   the panel reaching up to the card.

   So the fill is the panel's own paper — the lower half disappears into it —
   and the EDGE is the selected card's edge. That is what ties the three
   signals together: the same hairline runs around the filled card, turns down
   into the pointer, and lands on the panel. Geometry, size, angle and position
   are exactly as approved; only the two colours are stated.

   Both media blocks are restated because the notch is authored twice: inside
   `min-width:861px` in desk.css for the desktop rail, inside `max-width:860px`
   in v06-fix.css for the phone rail. One unscoped rule would still win, but
   restating it keeps each next to the geometry it belongs to and cannot leak
   to a width where no notch is drawn. */
@media (min-width: 861px){
  .tail.show .gah .cc.dk.is-open .mp-panel::before{
    background: var(--paper, #fff);
    border-left-color: var(--ac-edge, #BAD5F8);
    border-top-color:  var(--ac-edge, #BAD5F8);
  }
}
@media (max-width: 860px){
  .tail.show .gah .cc.rz6.is-open .mp-panel::before{
    background: var(--paper, #fff);
    border-left-color: var(--ac-edge, #BAD5F8);
    border-top-color:  var(--ac-edge, #BAD5F8);
  }
}