/* ================= PIVOT SPACE (v6.0) =================
   The landing constellation: 21 disciplines as nodes, every
   no-retraining pivot route as a directed vector between them.
   Sheet chrome is DOM; the graph itself is canvas. */

.mapsheet{ margin-top:26px; }
.ms-frame{
  position:relative; border:1px solid var(--line-2); border-radius:var(--r);
  /* Matches the dashboard tiles exactly: no fill, just the glassy top edge, so
     the blueprint grid shows through the sheet the way it does through them. */
  background:var(--tile-fill);
  box-shadow:var(--shadow);
  height:min(66vh, 620px); min-height:430px; overflow:hidden;
}
/* drafting corner ticks */
.ms-frame::before,.ms-frame::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none; z-index:4;
  border:1px solid var(--ink); opacity:.85;
}
.ms-frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ms-frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

#pivotMap{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
#pivotMap:focus-visible{ outline:2px solid var(--teal); outline-offset:-3px; }
#pivotMap.grab{ cursor:grabbing; }
#pivotMap.point{ cursor:pointer; }

/* sheet annotations */
.ms-corner{
  position:absolute; top:10px; left:12px; z-index:3; pointer-events:none;
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.14em;
  color:var(--dim); text-transform:uppercase;
}
.ms-corner b{ color:var(--muted); font-weight:600; }
.ms-corner .figno{ color:var(--teal); }

.ms-legend{
  position:absolute; left:12px; bottom:10px; z-index:3; pointer-events:none;
  display:flex; gap:14px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.1em;
  color:var(--dim); text-transform:uppercase;
}
.ms-legend i{ font-style:normal; color:var(--muted); }
.ms-legend .lg-strong{ color:var(--teal); }
.ms-legend .lg-weak{ opacity:.75; }

/* colour-mode switch */
.ms-modes{
  position:absolute; top:8px; right:10px; z-index:5; display:flex; gap:4px; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.12em;
}
.ms-modes .mm-k{ color:var(--dim); margin-right:4px; text-transform:uppercase; }
.ms-modes button{
  font:inherit; text-transform:uppercase; letter-spacing:.12em; cursor:pointer;
  color:var(--muted); background:transparent; border:1px solid var(--line-2);
  border-radius:var(--r); padding:4px 8px; transition:color .15s, border-color .15s, background .15s;
}
.ms-modes button:hover{ color:var(--text); border-color:var(--dim); }
.ms-modes button.on{ color:var(--teal); border-color:var(--teal); background:color-mix(in srgb, var(--teal) 10%, transparent); }

/* HUD readout */
.ms-hud{
  position:absolute; top:34px; right:10px; z-index:4; width:252px; max-height:calc(100% - 78px);
  overflow:auto; scrollbar-width:thin;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter:blur(5px);
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; color:var(--muted);
  padding:11px 12px;
}
.ms-hud .h-code{ color:var(--teal); letter-spacing:.14em; font-size:.6rem; }
.ms-hud .h-name{ color:var(--text); font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.01em; margin:2px 0 8px; line-height:1.15; }
.ms-hud .h-row{ display:flex; justify-content:space-between; gap:8px; padding:3.5px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.ms-hud .h-row:last-of-type{ border-bottom:0; }
.ms-hud .h-k{ color:var(--dim); letter-spacing:.06em; }
.ms-hud .h-v{ color:var(--text); text-align:right; }
.ms-hud .h-bar{ height:3px; background:var(--line); border-radius:2px; margin:6px 0 2px; overflow:hidden; }
.ms-hud .h-bar i{ display:block; height:100%; background:var(--teal); }
.ms-hud .h-sec{ margin-top:9px; padding-top:7px; border-top:1px solid var(--line-2); color:var(--dim); letter-spacing:.12em; font-size:.56rem; text-transform:uppercase; }
.ms-hud .h-routes{ margin-top:5px; display:flex; flex-direction:column; gap:2px; }
.ms-hud .h-route{
  display:flex; justify-content:space-between; gap:8px; cursor:pointer; padding:2.5px 4px; margin:0 -4px;
  border-radius:var(--r); color:var(--muted); background:transparent; border:0; font:inherit; text-align:left; width:calc(100% + 8px);
}
.ms-hud .h-route:hover{ background:color-mix(in srgb, var(--teal) 9%, transparent); color:var(--text); }
.ms-hud .h-route b{ color:var(--teal); font-weight:600; }
.ms-hud .h-route .rw{ color:var(--dim); }
.ms-hud .h-route.r2 .rw{ color:var(--amber); }
.ms-hud .h-note{ margin-top:8px; color:var(--dim); line-height:1.5; font-size:.6rem; }
.ms-hud .h-cta{
  display:block; width:100%; margin-top:10px; padding:7px 8px; cursor:pointer; text-align:center;
  font:inherit; text-transform:uppercase; letter-spacing:.14em; font-size:.58rem;
  color:var(--teal); background:color-mix(in srgb, var(--teal) 9%, transparent);
  border:1px solid var(--teal); border-radius:var(--r); transition:background .15s;
}
.ms-hud .h-cta:hover{ background:color-mix(in srgb, var(--teal) 18%, transparent); }
.ms-hud .h-idle{ line-height:1.65; }
.ms-hud .h-idle b{ color:var(--text); font-weight:600; }
.ms-hud .h-idle .hi-k{ color:var(--teal); letter-spacing:.14em; font-size:.56rem; text-transform:uppercase; display:block; margin-bottom:6px; }
.ms-hud .h-idle .hi-stat{ display:flex; justify-content:space-between; padding:2.5px 0; }
.ms-hud .h-idle .hi-stat span:last-child{ color:var(--text); }
.ms-hud .h-idle .hi-hint{ margin-top:8px; padding-top:7px; border-top:1px solid var(--line-2); color:var(--dim); font-size:.58rem; letter-spacing:.05em; }

/* hero tune-up for the map landing */
.hero-map{ padding:26px 0 14px !important; }
.hero-map .hero-h1{ margin-bottom:0; }
.hero-map .fig-hint{
  margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.14em;
  color:var(--dim); text-transform:uppercase;
}
.hero-map .fig-hint b{ color:var(--teal); font-weight:600; }

/* ---------- narrow: stack the sheet instead of floating over it ----------
   .ms-frame is a fixed-height overflow:hidden box with the canvas absolutely
   positioned across it, so every annotation is an overlay. That works on a
   wide screen and fails badly on a phone: a 212px HUD covers a third of the
   graph, and simply setting the HUD to `static` only dropped it ON TOP of the
   canvas, clipped, because the frame could not grow. Below 820px the frame
   becomes a plain column — caption, canvas, mode switch, readout — and the
   canvas gets its own bordered box and a real height of its own.
   map.js measures the CANVAS (not the frame) so this reflows correctly. */
@media (max-width:820px){
  .ms-frame{
    height:auto; min-height:0; overflow:visible;
    display:flex; flex-direction:column;
    border:0; background:none; box-shadow:none; border-radius:0;
  }
  .ms-frame::before,.ms-frame::after{ display:none; }

  .ms-corner{
    position:static; order:0; margin:0 0 8px; padding:0;
    font-size:.66rem; line-height:1.5; letter-spacing:.1em;
  }
  #pivotMap{
    position:relative; inset:auto; order:1;
    width:100%; height:min(64vh,520px); min-height:360px;
    border:1px solid var(--line-2); border-radius:var(--r);
    background:var(--tile-fill);
  }
  .ms-modes{
    position:static; order:2; margin:10px 0 0; flex-wrap:wrap; gap:6px;
    justify-content:flex-start; font-size:.62rem;
  }
  .ms-modes button{ min-height:40px; padding:10px 13px; }
  .ms-hud{
    position:static; order:3; width:auto; max-height:none; margin:10px 0 0;
    backdrop-filter:none; font-size:.7rem; line-height:1.55;
    background:var(--panel);
  }
  .ms-legend{ display:none; }
}