/* New Site placement matrix — scoped so shared report table classes stay unchanged */

.ns-placements-heading {
  font-size: 18px;
  font-weight: 700;
  color: #30363b;
  margin-bottom: 4px;
  line-height: 1.5;
}

.ns-placements-intro {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #4d5964;
  margin-bottom: 10px;
}

.ns-guidance {
  margin: 0 0 22px;
}

.ns-guidance p {
  margin: 7px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #4d5964;
}

.ns-guidance strong {
  font-weight: 700;
  color: #30363b;
}

.new-site-placements-wrap {
  overflow-x: auto;
  width: 100%;
}

.new-site-placements {
  border-collapse: collapse;
  width: 100%;
  min-width: 1150px;
  table-layout: fixed;
  color: #30363b;
  font-size: 14px;
  line-height: 1.5;
}

.new-site-placements th,
.new-site-placements td {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #dce1e5;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.new-site-placements .ns-row-label {
  width: 140px;
  text-align: left;
  font-weight: 700;
  color: #30363b;
}

.new-site-placements .ns-product-start {
  border-left: 2px solid #a7b2bc;
}

.new-site-placements .ns-product-end {
  border-right: 2px solid #a7b2bc;
}

.new-site-placements .svRepHdrCell,
.new-site-placements .svRepHdrCellCen {
  background-color: #f2f2f2;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.new-site-placements .ns-row-label.svRepHdrCell,
.new-site-placements .ns-row-label.svRepBodyCell {
  text-align: left;
}

.new-site-placements .ns-product-heading {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 17px 12px;
  vertical-align: middle;
}

.new-site-placements .ns-meta-row td {
  text-align: left;
  font-weight: 400;
  color: #4d5964;
  vertical-align: top;
}

.new-site-placements .ns-meta-row .ns-row-label,
.new-site-placements .ns-center-row .ns-row-label,
.new-site-placements .ns-device-row .ns-row-label {
  font-weight: 700;
  color: #30363b;
}

.new-site-placements .ns-center-row td {
  text-align: center;
  vertical-align: middle;
}

.new-site-placements .ns-device-row td {
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
}

.new-site-placements .ns-section-bar td {
  background-color: #f2f2f2;
  text-align: left;
  font-weight: 700;
  padding: 9px 12px;
  border-left: 0;
  border-right: 0;
}

.new-site-placements .ns-section-note {
  font-weight: 400;
  margin-left: 10px;
  color: #4d5964;
}

.new-site-placements .ns-size-row .ns-size-label {
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
  color: #30363b;
  padding: 10px 12px;
}

.new-site-placements .ns-size-row.ns-size-active .ns-size-label,
.new-site-placements .ns-size-row:has(input:checked) > .ns-size-label {
  font-weight: 700;
}

.new-site-placements .ns-size-row td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
  height: 42px;
}

.new-site-placements .ns-size-row label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  padding: 10px;
  margin: 0;
  cursor: pointer;
}

.new-site-placements input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #0877bc;
}

.new-site-placements .ns-size-row .ns-product-on,
.new-site-placements .ns-size-row:has(td[data-product='footer'] input:checked) td[data-product='footer'],
.new-site-placements .ns-size-row:has(td[data-product='header'] input:checked) td[data-product='header'],
.new-site-placements .ns-size-row:has(td[data-product='inline'] input:checked) td[data-product='inline'],
.new-site-placements .ns-size-row:has(td[data-product='rails'] input:checked) td[data-product='rails'] {
  background: #e8f5ff;
}

.new-site-placements .ns-size-row .ns-device-chosen,
.new-site-placements .ns-size-row td:has(input:checked) {
  box-shadow: inset 0 0 0 2px #0877bc;
}

.new-site-placements :focus-visible {
  outline: 3px solid #005fa0;
  outline-offset: 3px;
}

.ns-legend {
  text-align: center;
  color: #4d5964;
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0 0;
}

.ns-legend-swatch {
  display: inline-block;
  width: 20px;
  height: 13px;
  background: #e8f5ff;
  border: 1px solid #73bcea;
  vertical-align: middle;
  margin-right: 5px;
}

@media (pointer: coarse) {
  .new-site-placements .ns-size-row td,
  .new-site-placements .ns-size-row label {
    min-height: 44px;
    height: 44px;
  }
}