/* Searchable knowledge cards and ordered workflows, scoped to opted-in posts. */
.knowledge-map { container-type: inline-size; --map-accent: #285a8a; --map-tint: #f0f5fb; }
.knowledge-map .map-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.knowledge-map .map-jump a { padding: 5px 11px; border: 1px solid #dce5ed; border-radius: 6px; background: #fff; text-decoration: none; font-size: 13px; }
.knowledge-map .map-jump a:hover { background: var(--map-tint); }
.map-grid { display: grid; gap: 18px; }
.map-card { min-width: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid #dce5ed; border-top: 3px solid var(--map-accent); border-radius: 9px; background: #fff; break-inside: avoid; }
.map-card-green { --map-accent: #246747; --map-tint: #f0f7f2; }
.map-card-purple { --map-accent: #654b91; --map-tint: #f6f3fa; }
.map-card-orange { --map-accent: #93501d; --map-tint: #fcf5ee; }
.knowledge-map .map-index { margin: 0 0 5px; color: var(--map-accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.knowledge-map .map-card h2 { margin: 0; padding: 0; border: 0; color: #2e4056; font-size: 21px; }
.knowledge-map .map-purpose { margin: 6px 0 13px; color: #6d7c8e; font-size: 13px; }
.knowledge-map .map-card ul { margin: 0 0 16px; padding-left: 18px; font-size: 14px; line-height: 1.85; }
.knowledge-map .map-card li { margin: 7px 0; }
.knowledge-map .map-card li:first-child { margin-top: 0; }
.knowledge-map .map-card li:last-child { margin-bottom: 0; }
.knowledge-map .map-card li::marker { color: var(--map-accent); }
.map-card strong { color: #34475e; font-weight: 600; }
.knowledge-map .map-links { margin: auto 0 0; padding: 10px 12px; border-radius: 5px; background: var(--map-tint); font-size: 13px; line-height: 1.9; }
.knowledge-map .map-card .map-links a { color: var(--map-accent); }
.map-workflow { margin-top: 24px; padding: 20px; border: 1px solid #dce5ed; border-radius: 9px; background: #fff; break-inside: avoid; }
.knowledge-map .map-workflow h3 { margin: 0 0 14px; font-size: 17px; color: #34475e; }
.knowledge-map .map-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.knowledge-map .map-flow li { position: relative; min-width: 0; margin: 0; padding: 11px; border: 1px solid #dce5ed; border-radius: 6px; background: var(--map-tint); }
.map-flow strong, .map-flow span { display: block; }
.map-flow strong { color: #34475e; font-size: 14px; }
.map-flow span { color: #62748a; font-size: 12px; line-height: 1.7; margin-top: 4px; }
.map-flow li:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); color: #62748a; line-height: 22px; font-size: 17px; }
.knowledge-map .map-check { margin: 14px 0 0; font-size: 13px; color: #62748a; }
@container (min-width: 620px) {
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-map .map-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .map-flow li:not(:last-child)::after { content: '→'; left: 100%; top: 50%; transform: translateY(-50%); width: 22px; text-align: center; }
}
@container (max-width: 360px) {
  .map-card, .map-workflow { padding: 16px; }
}
@media print {
  .knowledge-map { container-type: normal; }
  .knowledge-map .map-jump { display: none; }
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12pt; }
  .map-card, .map-workflow { padding: 12pt; }
  .knowledge-map .map-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .map-flow li:not(:last-child)::after { content: '→'; left: 100%; top: 50%; transform: translateY(-50%); width: 22px; text-align: center; }
}