/* Targeted flow clarification for Module 03 — How Site Awareness Influences Discovery only.
   Make the preferred-local path and remote fallback path explicit without changing other lessons. */

/* Emphasize the preferred local result. */
.m3-tech-site-layout > .m3-tech-site.local .m3-tech-site-row > .m3-tech-node.dc,
.m3-analogy > .m3-a-location.local .m3-a-location-row > .m3-a-node.office.preferred{
  box-shadow:0 0 0 3px rgba(93,157,126,.08);
}
.m3-tech-site-layout > .m3-tech-site.local .m3-tech-site-row > .m3-tech-node.dc::after,
.m3-analogy > .m3-a-location.local .m3-a-location-row > .m3-a-node.office.preferred::after{
  content:"Preferred local candidate";
  display:inline-block;
  margin-top:8px;
  padding:3px 7px;
  border:1px solid #9ccab3;
  border-radius:999px;
  background:#f7fcf9;
  color:#3f6f59;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
}

/* The WAN box is an actual fallback step in this lesson, not a passive note. */
.m3-tech-site-layout > .m3-tech-wan,
.m3-analogy > .m3-a-wan{
  position:relative;
  margin:46px 0;
  border-style:solid;
  border-color:#c6b4d2;
  background:#fbf8fc;
  box-shadow:0 1px 3px rgba(73,54,86,.04);
}

/* Explicit connector from local choice to fallback path. */
.m3-tech-site-layout > .m3-tech-wan::before,
.m3-analogy > .m3-a-wan::before{
  content:"\2193\A If no suitable local DC is available";
  position:absolute;
  left:50%;
  top:-43px;
  transform:translateX(-50%);
  width:min(320px,90%);
  white-space:pre-line;
  text-align:center;
  color:#72567c;
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  pointer-events:none;
}

/* Explicit connector from WAN to the remote candidate. */
.m3-tech-site-layout > .m3-tech-wan::after,
.m3-analogy > .m3-a-wan::after{
  content:"\2193\A Remote fallback";
  position:absolute;
  left:50%;
  bottom:-43px;
  transform:translateX(-50%);
  width:min(240px,90%);
  white-space:pre-line;
  text-align:center;
  color:#72567c;
  font-size:10px;
  font-weight:800;
  line-height:1.25;
  pointer-events:none;
}

/* Mark the lower-site DC/office clearly as the fallback option. */
.m3-tech-site-layout > .m3-tech-site.remote .m3-tech-node.dc,
.m3-analogy > .m3-a-location.remote .m3-a-node.office{
  border-style:dashed;
}
.m3-tech-site-layout > .m3-tech-site.remote .m3-tech-node.dc::after,
.m3-analogy > .m3-a-location.remote .m3-a-node.office::after{
  content:"Remote fallback candidate";
  display:inline-block;
  margin-top:8px;
  padding:3px 7px;
  border:1px solid #c8b6d3;
  border-radius:999px;
  background:#fdfafd;
  color:#71587a;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
}

@media(max-width:980px){
  .m3-tech-site-layout > .m3-tech-wan,
  .m3-analogy > .m3-a-wan{margin:52px 0}
}