/* =========================================================================
   phases.css — diverging phase bars (match report → Phases)

   Same idea as the shot comparison strip: the row's name sits centred ABOVE
   its pair of bars, the two values sit at the outer edges, and a category
   header breaks the list into sections. Built in HTML rather than ggplot so
   the labels stay crisp text and the sections are real headings.
   ========================================================================= */

.ph-wrap {
  --ph-track: rgba(0, 0, 0, 0.055);
  padding: 2px 2px 6px;
}
.ph-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #3a3e5b;
}
.ph-sub {
  text-align: center;
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.45);
  margin: 2px 0 14px;
}

/* Category heading: a quiet rule with the label centred on it, so the groups
   read as sections without shouting over the phase names. */
.ph-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
}
.ph-sec::before,
.ph-sec::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.10);
}
.ph-wrap > .ph-sec:first-child { margin-top: 2px; }

.ph-row { margin-bottom: 13px; }
.ph-row-name {
  text-align: center;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.62);
  margin-bottom: 3px;
}
.ph-row-bar {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* The two halves meet at the centre line; each fill grows outward from it. */
.ph-half {
  flex: 1 1 0;
  min-width: 0;
  height: 15px;
  display: flex;
  background: var(--ph-track);
}
.ph-half-l { justify-content: flex-end; border-radius: 8px 0 0 8px; }
.ph-half-r { justify-content: flex-start; border-radius: 0 8px 8px 0; }
.ph-fill { height: 100%; }
.ph-half-l .ph-fill { border-radius: 8px 0 0 8px; }
.ph-half-r .ph-fill { border-radius: 0 8px 8px 0; }
/* Centre seam, so a row with two tiny bars still shows where zero is. */
.ph-mid {
  flex: 0 0 2px;
  height: 21px;
  background: rgba(0, 0, 0, 0.18);
}
.ph-num {
  flex: 0 0 78px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3a3e5b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ph-num-l { text-align: left; }
.ph-num-r { text-align: right; }
.ph-empty {
  padding: 22px;
  text-align: center;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
}

/* The Phase Stats card hugs its table instead of spanning the page - the
   reactable is fullWidth = FALSE, so a full-bleed card strands a wide gutter. */
.ph-tablewrap {
  display: flex;
}
.ph-tablewrap > .card {
  width: auto;
  max-width: 100%;
}

/* Rule between the two teams' column blocks in the Phase Stats table - without
   it the twelve numeric columns read as one undifferentiated run. */
.rt-td.ph-div,
.rt-th.ph-div {
  border-left: 2px solid rgba(58, 62, 91, 0.28) !important;
}

/* Disabled radio option (momentum engine, PV strength): shown but visibly
   unavailable, with a title explaining why. The option's input carries a real
   `disabled` attribute (radio_disable_option, utils_ui.R), so a label click
   dies natively while hover still reaches the tooltip - the old
   pointer-events:none here blocked the click but ate the tooltip with it. */
.mom-disabled { opacity: 0.42; cursor: not-allowed; }
.radio-inline:has(input:disabled) { cursor: not-allowed; }
/* No hover tint on a disabled segment or tab - an invite it can't honour. */
.to-seg .radio-inline:has(input:disabled):hover > span {
  background: none;
  color: inherit;
}
.to-tabs .radio-inline:has(input:disabled):hover > span {
  color: #8f9bb3;
}