/* Shared domain-relationship, JWCC, and cloud-provider coverage visuals. */

.relationshipIntro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.relationshipIntro p,
.relationshipCardHead p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.relationshipIntro p {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 13px 15px;
}

.relationshipVisuals {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 14px;
}

.relationshipVisuals > *,
.jwccLandingZoneLayout > * {
  min-width: 0;
}

.relationshipCard {
  border: 1px solid rgba(63, 83, 106, .14);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 34px rgba(34, 42, 52, .055);
  padding: 16px;
}

.relationshipHeatMapCard,
.relationshipRadarCard,
.relationshipSummaryCard,
.jwccLandingZoneCard {
  grid-column: 1 / -1;
}

.foundationRadarPanel {
  margin-top: 14px;
}

.foundationRadarPanel .relationshipRadarCard {
  padding: 18px;
}

.foundationRadarPanel .relationshipCardHead {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
}

.foundationRadarPanel .relationshipCardHead h3 {
  max-width: 780px;
}

.relationshipCardHead {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(260px, .55fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.relationshipCardHead h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: clamp(22px, 2vw, 30px);
}

.jwccLandingZoneLayout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(260px, .55fr);
  gap: 14px;
  align-items: stretch;
}

.jwccDiagram {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 85% 18%, rgba(102, 206, 241, .2), transparent 26%),
    linear-gradient(180deg, #f8fbff, #fff);
  padding: 10px;
}

.jwccDiagram svg {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

.jwccBoundary {
  fill: rgba(255, 255, 255, .72);
  stroke: #d6e6f8;
  stroke-width: 2;
}

.jwccBoundaryTitle {
  fill: var(--navy);
  font-size: 16px;
  font-weight: 700;
}

.jwccConnectors path {
  fill: none;
  stroke: url("#jwccSpineGradient");
  stroke-width: 5;
  stroke-linecap: round;
}

#jwccArrow path {
  fill: #25a871;
}

.jwccLayer rect {
  fill: #fff;
  stroke: #d7e6f8;
  stroke-width: 2;
}

.jwccLayer-authority rect {
  stroke: rgba(20, 57, 130, .34);
}

.jwccLayer-foundation rect {
  stroke: rgba(41, 124, 227, .38);
}

.jwccLayer-oem rect {
  stroke: rgba(102, 206, 241, .48);
}

.jwccLayer-workload rect {
  stroke: rgba(32, 165, 111, .42);
}

.jwccLayer-evidence rect {
  stroke: rgba(45, 140, 107, .4);
}

.jwccLayerTitle {
  fill: var(--navy);
  font-size: 15px;
  font-weight: 700;
}

.jwccLayerBody {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.jwccOemCloud rect {
  fill: rgba(237, 255, 248, .86);
  stroke: rgba(32, 165, 111, .42);
  stroke-width: 2;
}

.jwccOemCloud text {
  fill: var(--navy);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}

.jwccOemCloud line {
  stroke: rgba(32, 165, 111, .34);
  stroke-width: 2;
}

.jwccSnapshotText {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  padding: 16px;
}

.jwccSnapshotText h4 {
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jwccSnapshotText ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.jwccSnapshotText li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.38;
}

.jwccSourceGrid {
  display: grid;
  gap: 7px;
}

.jwccSourceGrid a {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 10px;
  text-decoration: none;
}

.jwccCaveat {
  margin: 0;
  border: 1px solid rgba(169, 121, 0, .28);
  border-radius: 10px;
  color: #5b4a14;
  background: rgba(255, 249, 228, .82);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.38;
  padding: 10px 12px;
}

.relationshipTableWrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.relationshipHeatMap {
  width: 100%;
  min-width: 1160px;
  border-collapse: collapse;
  background: #fff;
}

.relationshipHeatMap th,
.relationshipHeatMap td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 7px;
  text-align: center;
}

.relationshipHeatMap th {
  color: var(--navy);
  background: #f3f8ff;
  font-size: 12px;
  line-height: 1.15;
}

.relationshipHeatMap tbody th {
  width: 210px;
  text-align: left;
  background: #fff;
  font-size: 12px;
}


.relationshipColumn {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 148px;
  max-width: 46px;
}

.relationshipColumn-standards {
  background: #edf5ff !important;
}

.relationshipColumn-oem {
  background: #eefcf8 !important;
}

.relationshipCell span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.relationshipCell[data-strength="0"] {
  background: #f8fbff;
}

.relationshipCell[data-strength="1"] span {
  background: #7c90ad;
}

.relationshipCell[data-strength="2"] span {
  background: linear-gradient(135deg, #297ce3, #66cef1);
}

.relationshipCell[data-strength="3"] span {
  background: linear-gradient(135deg, #143982, #20a56f);
}

.relationshipLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.relationshipLegend span,
.relationshipLayerPair span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.relationshipLegend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 6px;
}

.relationshipLegend span[data-strength="1"]::before {
  background: #7c90ad;
}

.relationshipLegend span[data-strength="2"]::before {
  background: #297ce3;
}

.relationshipLegend span[data-strength="3"]::before {
  background: #20a56f;
}

.cspCoverageGrid {
  display: grid;
  gap: 16px;
  padding: 14px 0 8px;
}

.cspCoverageHeadRow,
.cspCoverageRow {
  display: grid;
  grid-template-columns: minmax(90px, 140px) repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 18px;
}

.cspCoverageHeadCell {
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cspCoverageRowLabel {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.cspCoverageBarTrack {
  position: relative;
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--soft, #f8fbff);
  border: 1px solid var(--line);
  cursor: help;
}

.cspCoverageBarTrack i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  overflow: hidden;
  opacity: .5;
}

a.cspCoverageBarTrack {
  text-decoration: none;
}

.cspCoverageBarTrack[data-confidence="low"],
.cspCoverageBarTrack[data-confidence="none"] {
  border-style: dashed;
}

.cspCoverageBarTrack:hover::after,
.cspCoverageBarTrack:focus-visible::after {
  content: attr(data-rationale);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: min(260px, 74vw);
  transform: translateX(-50%);
  border-radius: 10px;
  background: rgba(7, 24, 63, .96);
  color: #fff;
  box-shadow: 0 8px 22px rgba(7, 24, 63, .18);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
}

.cspCoverageBarTrack:hover::before,
.cspCoverageBarTrack:focus-visible::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 31;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(7, 24, 63, .96);
}

.cspCoverageCaveat {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}


.relationshipSummaryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.relationshipDomainCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  padding: 14px;
}

.relationshipDomainCard h4 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.relationshipDomainCard p {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.38;
}

.relationshipLayerPair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.relationshipLayerPair div {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 6px;
}

.relationshipLayerPair b {
  flex-basis: 100%;
  color: var(--navy);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.relationshipLayerPair span[data-strength="3"] {
  border-color: rgba(32, 165, 111, .42);
  background: #edfff8;
}

.relationshipLayerPair span[data-strength="2"] {
  border-color: rgba(41, 124, 227, .32);
  background: #f0f7ff;
}


@media (max-width: 1180px) {
  .relationshipVisuals,
  .relationshipCardHead,
  .jwccLandingZoneLayout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .relationshipIntro,
  .relationshipVisuals,
  .relationshipCardHead,
  .jwccLandingZoneLayout,
  .relationshipSummaryGrid,
  .relationshipLayerPair {
    grid-template-columns: 1fr;
  }
}