/* Architecture tab — diagram, nodes, and "why" tooltip */
.arch-intro { color: #cfd3d7; font-size: 14.5px; margin-bottom: 10px; }
.arch-hint { color: var(--muted); font-size: 12px; letter-spacing: .3px; margin-bottom: 14px; }
.arch-hint em { color: var(--accent); font-style: normal; font-weight: 600; }
.arch-wrap { overflow-x: auto; }
.arch-svg { display: block; width: 100%; min-width: 460px; height: auto; font-family: var(--font); }

.arch-svg .ae { stroke: rgba(255,255,255,.32); stroke-width: 1.2; }
.arch-svg .ael {
  fill: var(--muted); font-size: 9.5px; letter-spacing: .5px; text-anchor: middle;
  paint-order: stroke; stroke: #0b0d10; stroke-width: 3px;
}

.arch-svg g.an { cursor: pointer; }
.arch-svg g.an rect {
  fill: var(--panel-2); stroke: var(--ac, var(--line)); stroke-opacity: .55; stroke-width: 1.2;
  transition: stroke-opacity .15s ease, fill .15s ease;
}
.arch-svg g.an:hover rect { fill: #171b22; stroke-opacity: 1; }
.arch-svg .anl { fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: middle; }
.arch-svg .ans { fill: var(--muted); font-size: 10px; text-anchor: middle; letter-spacing: .3px; }
.arch-svg g.an:hover .ans { fill: var(--ac); }

.arch-tip {
  position: fixed; z-index: 400; max-width: 320px; padding: 13px 16px 14px;
  background: #12151a; border: 1px solid rgba(125,179,255,.45);
  box-shadow: 0 14px 44px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
}
.arch-tip.on { opacity: 1; visibility: visible; }
.arch-tip b { display: block; font-size: 13px; letter-spacing: .5px; margin-bottom: 2px; }
.arch-tip span {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.arch-tip p { font-size: 12.5px; line-height: 1.55; color: #cfd3d7; margin: 0; }