/* architecture-map: hand-built lane diagrams (no diagram library, CSP-clean).
   Desktop/tablet: each lane is one row whose boxes share the width (no sideways scroll).
   Phones (<=640px): each row stacks top-to-bottom and the arrows turn to point down. */
.map-lede{max-width:72ch;}
.maplinks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;}
.maplinks a{display:inline-flex;align-items:center;min-height:36px;font-size:12.5px;text-decoration:none;color:var(--accent2);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:bold;background:var(--card-bg);}
.maplinks a:hover{border-color:var(--accent2);text-decoration:none;}
.mapcard{padding:20px 20px 16px;margin:24px 0 0;}
.mapcard .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:bold;}
.mapcard h2{font-size:18px;line-height:1.3;margin:4px 0 4px;color:var(--ink);}
.mapcard .sub{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.55;max-width:72ch;}
.mscroll{padding-bottom:4px;}
.mlane{margin:0 0 16px;}
.mlane:last-child{margin-bottom:8px;}
.mlane-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:bold;margin-bottom:8px;}
.mrow{display:flex;align-items:stretch;gap:8px;}
.mbox{flex:1 1 0;min-width:0;max-width:240px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 12px;
  border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:10px;background:var(--panel2);color:var(--ink);
  text-decoration:none;font-size:13px;line-height:1.35;overflow-wrap:anywhere;}
.mbox b{overflow-wrap:break-word;}
a.mbox:hover{border-color:var(--accent2);border-left-color:var(--accent2);text-decoration:none;}
a.mbox:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;}
.mbox span{font-size:12px;color:var(--muted);}
.mbox.star{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--panel2));}
.mbox.store{border-left-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,var(--panel2));}
.marr{flex:none;align-self:center;color:var(--muted);font-weight:bold;line-height:1;}
.legend{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:8px;line-height:1.55;}
.legend b{color:var(--ink);}
@media (max-width:640px){
  .mapcard{padding:16px 14px 12px;}
  .mrow{flex-direction:column;gap:4px;}
  .mbox{flex:none;max-width:none;}
  .marr{align-self:flex-start;margin-left:18px;transform:rotate(90deg);}
}