/* NSCOESN — "Areas of concern" mind-map. Loaded only where [nscoesn_concerns] is used.
   Chips carry translatable text; the SVG draws the connectors. Chips and connectors
   share one 0-100 coordinate space (SVG preserveAspectRatio="none"), so every branch
   meets its chip; the solid hub and chips sit above the SVG and cover the joins. */
/* Scroll rail: contains the map's overflow on small screens so it can be panned sideways
   (like the GC advisory board org chart) instead of reflowing. */
.concerns-scroll{max-width:1000px;margin:26px auto}
.concerns-map{position:relative;width:100%;margin:0 auto;aspect-ratio:1000/620}
.concerns-map .concerns-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.concerns-map .concern-chip{
  position:absolute;transform:translate(-50%,-50%);z-index:1;
  padding:10px 18px;border-radius:11px;white-space:nowrap;
  font-family:var(--font-body);font-weight:600;font-size:clamp(13px,1.35vw,16px);
  line-height:1.15;box-shadow:0 10px 26px rgba(0,0,0,.4);letter-spacing:.01em;
}
.concerns-map .concern-hub{
  font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,34px);
  padding:16px 34px;background:var(--color-gules);color:var(--color-argent);
  border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:2;
}
/* Phones: keep the real radial mind-map (SVG connectors and all) and let the reader pan it
   sideways inside the rail, rather than reflowing it into a list. A min-width holds the layout
   at a size where chips clear the hub; the rail scrolls. */
@media (max-width:760px){
  .concerns-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px}
  .concerns-map{min-width:640px}
}