.union-summary.union-summary-cards {
  gap: 12px;
  border: 0;
  background: none;
}
.union-summary-cards > .union-metric {
  text-align: left;
  font: inherit;
  cursor: pointer;
  --metric-color: #66dfff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  grid-template-rows: auto 1fr auto;
  gap: 10px 8px;
  min-width: 0;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #284356;
  border-radius: 3px 16px 3px 3px;
  background: radial-gradient(ellipse at top right, #163147 0, transparent 70%), linear-gradient(135deg, #0b1b30f5, #061020f5);
  box-shadow: 0 8px 24px #0003;
}
.union-summary-cards > .union-metric:hover,
.union-summary-cards > .union-metric[aria-pressed="true"] { border-color:var(--metric-color); }
.union-summary-cards > .union-metric:focus-visible { outline:2px solid var(--metric-color); outline-offset:3px; }
.union-action-grid[hidden], .planned-actions-section[hidden] { display:none; }
.union-summary-cards > .union-metric-underway { --metric-color: #f0c77c; }
.union-summary-cards > .union-metric-completed { --metric-color: #8ce0b6; }
.union-summary-cards > .union-metric-planned { --metric-color: #b9a6ff; }
.union-metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 38px;
  height: 2px;
  background: var(--metric-color);
  box-shadow: 0 0 14px var(--metric-color);
}
.union-summary-cards .union-metric-icon {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  color: var(--metric-color);
  background: #ffffff05;
}
.union-metric-icon svg { width: 23px; height: 23px; }
.union-summary-cards small {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: #bbccdc;
  font-size: 11px;
  letter-spacing: .8px;
  line-height: 1.5;
  text-transform: uppercase;
}
.union-summary-cards strong {
  grid-column: 1;
  grid-row: 2;
  color: var(--metric-color);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.union-metric-detail {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid #ffffff0d;
  color: #91a8be;
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .union-summary.union-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .union-summary.union-summary-cards { gap: 8px; }
  .union-summary-cards > .union-metric { padding: 15px 12px; grid-template-columns: minmax(0, 1fr) 26px; gap: 9px 4px; }
  .union-metric::before { left: 12px; }
  .union-summary-cards .union-metric-icon { width: 26px; height: 30px; border-radius: 6px; }
  .union-metric-icon svg { width: 18px; height: 18px; }
  .union-summary-cards small { font-size: 10px; letter-spacing: .3px; overflow-wrap: anywhere; }
  .union-summary-cards strong { font-size: 34px; }
  .union-metric-detail { font-size: 11px; }
}