/* ratio-card.css — the .pr-card vocabulary, shared.

   Lifted VERBATIM out of PipelineReport.razor's <style> block so RatioCard.razor and
   /reports can use it too. It lives here rather than inside the component because a
   <style> block in a .razor page is global-on-render, not scoped: PipelineReport's
   ExitBlock still writes .pr-card / .pr-card-row / .pr-card-who markup by hand, and a
   component-scoped copy would have left that card unstyled the moment RatioBlock moved out.

   Type scale is load-bearing and must not shrink:
     .pr-card-n    --text-hero  40px   the figure
     .pr-card-math --text-body  18px   the counts under it
     .pr-card-def  --text-sm    14px   the formula caption — already AT the house floor
*/

.pr-card { border: 1px solid var(--border-input); border-radius: var(--radius-md); padding: var(--space-lg); }
.pr-card.pr-live { cursor: pointer; transition: border-color .12s; }
.pr-card.pr-live:hover { border-color: var(--color-primary); }
.pr-card-title { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text-primary); }
.pr-card-n { font-size: var(--text-hero); font-weight: var(--weight-display); color: var(--text-heading);
             font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; margin: var(--space-sm) 0 var(--space-xs); }
/* Bid win rate is the headline number of the pair — it gets the success colour.
   Market capture stays ink so the two are not read as the same measure. */
.pr-card-n.pr-good { color: var(--color-success); }
/* Exit cards read left to right: the count, then which projects it is. */
.pr-card-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-lg); margin: var(--space-sm) 0 var(--space-xs); }
.pr-card-row .pr-card-n { margin: 0; }
.pr-card-who { font-size: var(--text-sm); color: var(--text-placeholder); line-height: 1.4; }
/* Same affordance the strip boxes use, so a card and a box behave alike. */
.pr-card-go { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); margin-top: var(--space-md); }
/* Outcome tag in the drill-down. Deliberately colourless — the page already spends
   green on the win rate and amber on two conversions; a fifth colour vocabulary here
   would dilute both. */
.pr-tag { display: inline-block; font-size: var(--text-sm); font-weight: var(--weight-semibold);
          color: var(--text-secondary); background: var(--bg-canvas); border-radius: var(--radius-pill);
          padding: 1px var(--space-sm); margin-left: var(--space-sm); vertical-align: middle; }
.pr-card-math { font-size: var(--text-body); color: var(--text-secondary); }
/* The definition sits LAST, under the figure it explains. */
.pr-card-def { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-sm); line-height: 1.4; }