/* ============================================================
   Export Markets — trade-lane map
   ============================================================ */
.market-wrap{
  display:grid;
  gap:var(--sp-6);
  background:color-mix(in srgb, var(--black-950) 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--black-800);
}
.market-map{
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.market-map canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.market-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  z-index:3;
}
.market-node .dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--black-900);
  border:2px solid var(--jodhpur-400);
  transition: all var(--dur-fast) var(--ease);
  box-shadow:0 0 0 0 rgba(107,167,219,.5);
}
.market-node button{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.market-node .name{
  font-size:11px; font-weight:700; letter-spacing:.03em;
  color:var(--on-black-soft);
  white-space:nowrap;
  background:rgba(6,7,10,.7);
  padding:3px 8px;
  border:1px solid transparent;
  transition:all var(--dur-fast) var(--ease);
}
.market-node.is-active .dot, .market-node:hover .dot{
  background:var(--jodhpur-400);
  box-shadow:0 0 0 6px rgba(107,167,219,.22);
}
.market-node.is-active .name, .market-node:hover .name{
  color:var(--black-950);
  background:var(--jodhpur-400);
  border-color:var(--jodhpur-400);
}
.market-hub{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none;
}
.market-hub .dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--jodhpur-400);
  box-shadow:0 0 0 8px rgba(107,167,219,.16);
}
.market-hub .name{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; color:var(--on-black);
  background:var(--black-950);
  border:1px solid var(--jodhpur-600);
  padding:3px 9px;
}

.market-exports{ display:flex; flex-wrap:wrap; gap:6px; }
.market-exports span{
  font-size:11px; font-weight:600; color:var(--on-black);
  border:1px solid var(--line-on-black-strong);
  padding:4px 9px;
}
.market-legend{
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--black-800);
  color:var(--on-black-soft);
  font-size:var(--fs-xs);
}
.market-legend span{ display:inline-flex; align-items:center; gap:8px; }
.market-legend i{
  width:9px;height:9px;border-radius:50%;
  background:var(--jodhpur-400); display:inline-block;
}

@media (min-width:900px){
  .market-map{ min-height:520px; }
}

/* Static region cards (always-visible, crawlable content — the map
   above is an interactive index into these, not a replacement) */
.market-card-grid{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
.market-card{
  background:color-mix(in srgb, var(--paper-raised) 70%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border:1px solid var(--line);
  border-top:2px solid var(--jodhpur-500);
  padding:var(--sp-5);
  scroll-margin-top:110px;
  transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.market-card.is-highlighted{
  border-color:var(--jodhpur-500);
  box-shadow: var(--shadow-float);
}
.market-card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.market-card-head .mcode{
  font-size:11px; color:var(--jodhpur-700); white-space:nowrap;
}
.market-card p{ color:var(--slate); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.market-card dl{ margin-bottom:var(--sp-4); }
.market-card dt{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-soft); margin-bottom:4px; }
.market-card dd{ font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--ink); }
.market-card .market-exports span{
  color:var(--ink); border-color:var(--line-strong);
}

@media (min-width:640px){
  .market-card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1100px){
  .market-card-grid{ grid-template-columns:repeat(3,1fr); }
}