/* R11.10.6 — evidence-bound Channel SEO Playbook */
.channelSeoPlaybookSection {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent, #ff8a5b) 28%, var(--border, #29384d));
  background: color-mix(in srgb, var(--panel, #142238) 94%, var(--accent, #ff8a5b) 6%);
}

.channelSeoPlaybookSection > small {
  display: block;
  margin-bottom: 12px;
  color: var(--accent, #ff9d75);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.channelSeoPlaybookSection .muted {
  color: var(--muted, #aab7c9);
}

.channelSeoTwoColumns,
.channelSeoThreeColumns {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.channelSeoTwoColumns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.channelSeoThreeColumns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channelSeoTwoColumns > div,
.channelSeoThreeColumns > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #29384d) 84%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2, #101a2b) 88%, transparent);
}

.channelSeoTwoColumns b,
.channelSeoThreeColumns b {
  display: block;
  margin-bottom: 7px;
}

.channelSeoTwoColumns p,
.channelSeoThreeColumns p,
.channelSeoTwoColumns ul,
.channelSeoThreeColumns ul,
.channelSeoTwoColumns ol,
.channelSeoThreeColumns ol {
  margin: 7px 0 0;
}

.channelSeoRouteGrid,
.channelSeoScoreGrid {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.channelSeoRouteGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.channelSeoScoreGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channelSeoRouteGrid > div,
.channelSeoScoreGrid > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border, #29384d) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2, #101a2b) 90%, transparent);
}

.channelSeoRouteGrid span,
.channelSeoScoreGrid span {
  color: var(--muted, #aab7c9);
  font-size: 0.78rem;
}

.channelSeoScoreGrid b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.channelSeoClusterList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.channelSeoClusterList details {
  border: 1px solid color-mix(in srgb, var(--border, #29384d) 86%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-2, #101a2b) 90%, transparent);
}

.channelSeoClusterList summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  font-weight: 750;
}

.channelSeoClusterList summary span {
  color: var(--muted, #aab7c9);
  font-size: 0.78rem;
  font-weight: 600;
}

.channelSeoClusterList dl {
  display: grid;
  grid-template-columns: minmax(112px, 0.35fr) minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
  padding: 0 13px 13px;
}

.channelSeoClusterList dl > div {
  display: contents;
}

.channelSeoClusterList dt {
  color: var(--muted, #aab7c9);
  font-size: 0.8rem;
  font-weight: 700;
}

.channelSeoClusterList dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.channelSeoEvidenceMix {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.channelSeoEvidenceMix > span {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent, #ff8a5b) 25%, var(--border, #29384d));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #ff8a5b) 9%, transparent);
  font-size: 0.76rem;
  font-weight: 700;
}

.channelSeoContract {
  border-color: color-mix(in srgb, #5aa7ff 38%, var(--border, #29384d));
  background: color-mix(in srgb, var(--panel, #142238) 92%, #5aa7ff 8%);
}

.channelSeoContract .buttonLink {
  display: inline-flex;
  margin-top: 8px;
}

html[data-kg-theme="light"] .channelSeoPlaybookSection {
  background: color-mix(in srgb, #ffffff 95%, var(--accent, #df6035) 5%);
}

html[data-kg-theme="light"] .channelSeoTwoColumns > div,
html[data-kg-theme="light"] .channelSeoThreeColumns > div,
html[data-kg-theme="light"] .channelSeoRouteGrid > div,
html[data-kg-theme="light"] .channelSeoScoreGrid > div,
html[data-kg-theme="light"] .channelSeoClusterList details {
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 900px) {
  .channelSeoThreeColumns,
  .channelSeoRouteGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .channelSeoTwoColumns,
  .channelSeoThreeColumns,
  .channelSeoRouteGrid,
  .channelSeoScoreGrid {
    grid-template-columns: 1fr;
  }

  .channelSeoClusterList dl {
    grid-template-columns: 1fr;
  }

  .channelSeoClusterList dt {
    margin-top: 4px;
  }
}