/* ==========================================================================
   THE ACTIVE CLIENT, IN THE PAGE'S OWN ACTIVE COLOUR
   The chosen card was #F7FAFF — so close to white that on a bright screen you
   could not tell which client you had opened. It now carries a light tint of
   the section's active colour (--rz-act, the page's Google blue), a matching
   edge and a soft halo: clearly the selected one, still light.

   The tint is derived from the active colour rather than from the client's
   own brand colour, deliberately: four of the brands are near-black, and a
   ground mixed from those reads as a grey box rather than a selection.
   ========================================================================== */
/* declared on the SECTION, not on the card. The notch that joins the panel to
   the chosen card is `.mp-panel::before`, and a custom property set on `.mp-i`
   is invisible to it — the notch resolved `background: var(--ac-bg)` to
   nothing (transparent) and its border to the initial near-black, which is
   what made the little arrow above the panel look wrong. */
.cc.rz6{
  --ac-bg:   color-mix(in srgb, var(--rz-act)  9%, #fff);
  --ac-edge: color-mix(in srgb, var(--rz-act) 30%, #fff);
  --ac-hov:  color-mix(in srgb, var(--rz-act)  4%, #fff);
}

/* pressing one should feel like something happened before the panel arrives */
.cc.rz6 .mp-i:hover{ background: var(--ac-hov); border-color: var(--ac-edge); }
.cc.rz6 .mp-i:active{ background: var(--ac-bg); }

/* no shadow on the chosen card: the tinted ground and the edge already say
   which one is open, and the 3px halo read as a glow sitting on top of it */
.cc.rz6 .mp-i.is-sel,
.cc.rz6 .mp-i.is-sel:hover{
  background: var(--ac-bg);
  border-color: var(--ac-edge);
  box-shadow: none;
}
.cc.rz6 .mp-i.is-sel b{ color: var(--ink); }
.cc.rz6 .mp-i.is-sel .mp-s{ color: var(--ink-3); }
/* the approved blue, unchanged — this was darkened by mistake when the active
   ground was added, and the arrow is meant to be exactly as it was approved */
.cc.rz6 .mp-i.is-sel .cc-cue{ color: #1560CE; }

/* The notch above the panel is left exactly as D5 draws it — #F7FAFF on a
   #D3E2FA edge. It was re-tinted to match the new active ground, and that
   made the little arrow read differently from the approved reference. The
   active colour applies to the CARD; the arrow and its notch are the
   approved ones and are not touched. */

/* ---- no shadow anywhere in this section --------------------------------
   The panel that opens under the row carried a drop shadow
   (0 20px 44px -34px), which is the one that appears after "See results" is
   pressed. It keeps its border and its radius; the shadow comes off, so the
   open panel sits flat on the page like everything else in the section. */
.cc.rz6 .mp-card{ box-shadow: none; }

/* ==========================================================================
   THE TRADE, GIVEN THE ROOM THE URL BADGE USED TO TAKE
   `.mp-who` is a flex row — mark, then the name-and-trade column. Without a
   `min-width: 0` on that column a long trade cannot shrink or wrap inside it,
   because a flex item's default minimum is its content: "Facility Management"
   would push the column wider than its share and be clipped by the panel
   rather than wrapping. The column can now use the full width that is left,
   and the trade wraps to a second line instead of being cut.
   ========================================================================== */
.cc.rz6 .mp-who{ align-items: flex-start; }
/* `:not(.mp-wm)` matters: the logo mark is a <span> too, so a bare
   `.mp-who > span` gave it `flex: 1 1 auto` and the 42px square stretched
   into a wide bar. Only the name-and-trade column may grow. */
.cc.rz6 .mp-who > span:not(.mp-wm){ min-width: 0; flex: 1 1 auto; }
.cc.rz6 .mp-who h3{ overflow-wrap: anywhere; }
.cc.rz6 .mp-meta{ flex-wrap: wrap; row-gap: 2px; }
.cc.rz6 .mp-trade{
  display: block; max-width: 100%;
  line-height: 1.35; overflow-wrap: anywhere; white-space: normal;
}
/* the mark keeps its own alignment against the name rather than the block */
.cc.rz6 .mp-wm{ margin-top: 2px; }