.concept-graph > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}
.concept-graph > summary::-webkit-details-marker { display: none; }
.concept-graph > summary::after { content: '+'; color: var(--blue); font: 500 20px var(--mono); }
.concept-graph[open] > summary::after { content: '−'; }

.certification-grid > .certification-card {
  display: block;
  border: 1px solid #ccd6e4;
  background: #fff;
  color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.certification-grid > .certification-card:hover {
  border-color: #8baad4;
  box-shadow: 5px 5px 0 #dce7f5;
}
.certification-grid > .certification-card[open] { grid-column: 1 / -1; border-color: #8baad4; box-shadow: 5px 5px 0 #dce7f5; }
.certification-card > summary { display: grid; gap: 0; padding: 28px; cursor: pointer; list-style: none; }
.certification-card > summary::-webkit-details-marker { display: none; }
.certification-code { color: var(--blue); font: 9px var(--mono); text-transform: uppercase; }
.certification-name { margin-top: 13px; font: 600 20px/1.25 var(--display); }
.certification-counts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 27px; border-top: 1px solid var(--line); padding-top: 18px; }
.certification-counts > span { display: grid; gap: 8px; border-left: 1px solid var(--line); padding-left: 14px; }
.certification-counts > span:first-child { border-left: 0; padding-left: 0; }
.certification-counts small { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.certification-counts b { color: var(--blue); font: 500 20px var(--mono); }
.certification-card-action { display: flex; align-items: center; gap: 7px; margin-top: 20px; color: var(--blue); font: 600 10px var(--body); }
.certification-card-action b::after { content: '+'; font: 500 15px var(--mono); }
.certification-card[open] .certification-card-action b::after { content: '−'; }
.certification-card .when-open { display: none; }
.certification-card[open] .when-closed { display: none; }
.certification-card[open] .when-open { display: inline; }
.blueprint-track-body { border-top: 1px solid var(--line); padding: 24px; }
.certification-page-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--blue); font-size: 10px; font-weight: 600; text-decoration: none; }
.certification-page-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.blueprint-domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.blueprint-domain { border: 1px solid var(--line); }
.blueprint-domain > header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 9px; border-bottom: 1px solid var(--line); padding: 16px; }
.blueprint-domain > header code { color: var(--blue); font: 500 8px var(--mono); }
.blueprint-domain > header h4 { margin: 0; font: 600 15px/1.3 var(--display); }
.blueprint-domain > header span { color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.blueprint-domain > ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.blueprint-objective { padding: 15px 16px; }
.blueprint-objective + .blueprint-objective { border-top: 1px solid var(--line); }
.blueprint-objective > div { display: flex; align-items: baseline; gap: 9px; }
.blueprint-objective > div code { flex: 0 0 auto; color: var(--blue); font: 500 8px var(--mono); }
.blueprint-objective > div strong { font-size: 11px; line-height: 1.45; }
.blueprint-objective > ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.blueprint-objective > ul li { border: 1px solid #d7dfeb; padding: 4px 7px; background: #f8faff; color: #596981; font-size: 8px; }
.blueprint-objective > ul li.primary { border-color: #a9bfdf; background: #edf3fc; color: var(--blue-dark); }
.blueprint-objective > small { display: block; margin-top: 8px; color: #8994a5; font: 7px var(--mono); }

.concept-graph { margin-top: 18px; border: 1px solid var(--line); }
.concept-graph > summary { min-height: 58px; padding: 13px 16px; }
.concept-graph > summary > span { color: var(--blue-dark); font: 600 12px var(--body); }
.concept-graph > summary > small { margin-left: auto; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.concept-graph-body { border-top: 1px solid var(--line); padding: 18px; background: var(--soft); }
.concept-node-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.concept-node-grid > span { border: 1px solid #cbd7e8; padding: 7px 9px; background: #fff; color: #40516b; font-size: 9px; }
.concept-relationships { margin-top: 22px; }
.concept-relationships > p { color: var(--muted); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.concept-relationships ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.concept-relationships li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 10px; background: #fff; font-size: 9px; }
.concept-relationships li b { color: var(--blue); font: 500 12px var(--mono); }
.concept-relationships li small { grid-column: 1 / -1; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.concept-graph-note { margin: 16px 0 0; color: var(--muted); font-size: 10px; }

@media (max-width: 850px) {
  .blueprint-domain-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .certification-counts { grid-template-columns: 1fr; gap: 14px; }
  .certification-counts > span { border-left: 0; padding-left: 0; }
  .blueprint-track-body { padding: 14px; }
  .blueprint-domain > header { grid-template-columns: auto 1fr; }
  .blueprint-domain > header span { grid-column: 2; }
  .concept-graph > summary { align-items: flex-start; flex-wrap: wrap; }
  .concept-graph > summary > small { width: calc(100% - 30px); margin-left: 0; }
  .concept-relationships ol { grid-template-columns: 1fr; }
}
