/* ── Baserock Architecture Diagram ── */
.br-diagram-wrap {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  margin: 32px 0;
}
.br-diagram-header {
  text-align: center;
  margin-bottom: 36px;
}
.br-diagram-title {
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.br-diagram-subtitle {
  font-size: 13px;
  color: #64748b;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}
.br-diagram-scroll {
  overflow-x: auto;
}
#br-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0;
  padding: 4px 0 8px;
}
.br-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 14px 18px;
  border-radius: 14px;
  position: relative;
  flex-shrink: 0;
}
.br-zone-label {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.br-zone-input    { background: #f8fafc; border: 1.5px dashed #cbd5e1; }
.br-zone-input    .br-zone-label { color: #94a3b8; }
.br-zone-platform { background: #eff6ff; border: 1.5px dashed #bfdbfe; }
.br-zone-platform .br-zone-label { color: #3b82f6; }
.br-zone-output   { background: #f0fdf4; border: 1.5px dashed #86efac; }
.br-zone-output   .br-zone-label { color: #22c55e; }
.br-conn-spacer   { width: 44px; flex-shrink: 0; }
.br-platform-inner { display: flex; align-items: center; gap: 0; margin-top: 16px; }
.br-platform-left  { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.br-platform-mid   { width: 44px; flex-shrink: 0; }
.br-platform-sep   { width: 26px; flex-shrink: 0; }
.br-card {
  background: white;
  border-radius: 10px;
  width: 130px;
  min-height: 92px;
  padding: 13px 12px 11px;
  box-shadow: 0 2px 12px rgba(15,23,42,0.07);
  border: 1px solid #e2e8f0;
  border-left: 3.5px solid #cbd5e1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  position: relative;
}
.br-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(15,23,42,0.13); z-index: 2; }
.br-card-icon { font-size: 18px; line-height: 1; margin-bottom: 5px; }
.br-card-name { font-size: 12px; font-weight: 600; color: #0f172a; margin-bottom: 3px; }
.br-card-desc { font-size: 10px; color: #94a3b8; line-height: 1.45; }
.br-c-input     { border-left-color: #94a3b8; }
.br-c-discovery { border-left-color: #2563eb; }
.br-c-buct      { border-left-color: #7c3aed; }
.br-c-ai        { border-left-color: #0284c7; }
.br-c-agent     { border-left-color: #059669; }
.br-c-output    { border-left-color: #16a34a; }
.br-card-tall   { min-height: 160px; display: flex; flex-direction: column; justify-content: center; }
.br-badge-ai { position: absolute; top: -9px; right: 6px; background: #eff6ff; color: #2563eb; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; border: 1px solid #bfdbfe; white-space: nowrap; }
#br-connections { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
@keyframes br-dash-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
.br-conn-path { fill: none; stroke-width: 1.8; stroke-dasharray: 6 4; animation: br-dash-flow 0.85s linear infinite; }
#br-tooltip {
  position: fixed;
  background: #1e293b;
  color: #f1f5f9;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
#br-tooltip.br-show { opacity: 1; transform: translateY(0); }
.br-legend { display: flex; justify-content: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.br-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; }
.br-legend-pip { width: 24px; height: 3px; border-radius: 2px; flex-shrink: 0; }
@media (max-width: 860px) {
  #br-diagram { flex-direction: column; align-items: stretch; gap: 20px; }
  .br-conn-spacer { display: none; }
  #br-connections { display: none; }
  .br-zone { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .br-platform-inner { flex-direction: column; align-items: center; gap: 10px; }
  .br-platform-left { flex-direction: row; gap: 10px; }
  .br-platform-mid, .br-platform-sep { display: none; }
  .br-card-tall { min-height: 92px; height: auto !important; }
}