/* ============================================================
   Sail Race Tracker — mesh-flow "how it works" visualization
   Pairs with js/meshviz.js (auto-inits every [data-meshviz]).
   ============================================================ */

.meshviz{
  position:relative;
  width:100%;
  aspect-ratio:1000/560;
  border:1px solid var(--line);
  border-radius:var(--radius,16px);
  background:
    radial-gradient(120% 85% at 50% -10%,
      var(--accent-soft,rgba(31,111,220,.12)) 0%,
      rgba(31,111,220,0) 55%),
    var(--panel);
  overflow:hidden;
  contain:content;
}
@media (max-width:560px){
  .meshviz{aspect-ratio:560/760}
}
/* older engines without aspect-ratio: padding-box trick keeps the stage sized */
@supports not (aspect-ratio: 1 / 1){
  .meshviz{height:0;padding-bottom:56%}
  @media (max-width:560px){
    .meshviz{padding-bottom:135.7%}
  }
}

.meshviz canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:pan-y;
}

/* JS-injected zone labels */
.meshviz .mv-label{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,0);
  font:600 .72rem/1.2 'Space Grotesk','Segoe UI',system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.meshviz .mv-label small{
  display:block;
  font-size:.92em;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;
  opacity:.75;
}
@media (max-width:560px){
  .meshviz .mv-label{font-size:.6rem;letter-spacing:.06em}
}

/* JS-injected legend (decorative — container carries the aria-label) */
.meshviz .mv-legend{
  position:absolute;
  top:10px;
  right:12px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.06));
  font:500 .68rem/1 'Inter','Segoe UI',system-ui,sans-serif;
  color:var(--muted);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.meshviz .mv-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.meshviz .mv-legend i{display:inline-block;flex:none}
.meshviz .mv-k-node{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 6px var(--accent-2);
}
.meshviz .mv-k-link{
  width:18px;height:0;
  border-top:2px dashed var(--accent);
  opacity:.6;
}
.meshviz .mv-k-packet{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 3px var(--accent-soft,rgba(31,111,220,.12));
}
/* drawn database key — matches the cylinder-stack glyph on the Pi node */
.meshviz .mv-k-db{
  width:10px;height:9px;
  border:1.5px solid var(--accent);
  border-radius:5px / 3.5px;
  background:linear-gradient(var(--accent),var(--accent)) center / 100% 1.5px no-repeat;
  opacity:.85;
}
@media (max-width:560px){
  .meshviz .mv-legend{top:6px;right:8px;gap:9px;padding:6px 10px;font-size:.6rem}
  .meshviz .mv-k-link{width:14px}
}

/* Fallback image (injected when canvas 2d is unavailable or init throws) */
.meshviz.is-fallback img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}