/* workflow-map.css */
.wfmap-wrap {
  margin-top: 56px;
  position: relative;
}

.wfmap-frame {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 40px 32px 24px;
}

.wfmap-corners span {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.wfmap-corners span:nth-child(1) { top: -9px; left: -9px; }
.wfmap-corners span:nth-child(2) { top: -9px; right: -9px; }
.wfmap-corners span:nth-child(3) { bottom: -9px; left: -9px; }
.wfmap-corners span:nth-child(4) { bottom: -9px; right: -9px; }

.wfmap-meta {
  display: grid;
  grid-template-columns: 100px 1fr 100px 120px;
  gap: 32px;
  padding: 0 0 24px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
}
@media (max-width: 760px) { .wfmap-meta { grid-template-columns: 1fr 1fr; gap: 16px; } }
.wfmap-meta-l {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wfmap-meta-v {
  font-size: 12px;
  color: var(--ink);
  margin-top: 4px;
}

.wfmap-svg {
  width: 100%;
  height: auto;
  display: block;
}

.wfmap-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.wfmap-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.wfmap-legend-dot {
  width: 22px; height: 0; border-top: 1.25px solid var(--blueprint);
}
.wfmap-legend-dot.dash { border-top-style: dashed; }
.wfmap-legend-flag { color: var(--terra); font-size: 12px; }