/* Shared 3D click-detail card — used by gladhand-markets, can-meridian-3d,
   spare-parts-3d, open-can-data-3d, eea-meridian-x9d13.
   Expects --card --ink --muted --rule --th --accent --display --body --mono --fs
   (fallbacks match wr-3d.css: paper #e8edf3, accent #1a6abf). */
#detail{
  position:fixed;left:16px;bottom:16px;z-index:12;
  width:calc(300px * var(--fs, 1));max-width:calc(100% - 32px);
  background:var(--card, #ffffff);
  color:var(--ink, #0d1f38);
  border:1px solid var(--rule, #e5e9ef);
  border-left:4px solid var(--c, var(--accent, #1a6abf));
  border-radius:12px;padding:12px 14px 12px 14px;
  box-shadow:0 8px 24px rgba(10,20,40,.18);
  display:none;backdrop-filter:blur(10px);
  font-family:var(--body, "DM Sans", system-ui, sans-serif);
  font-size:calc(13px * var(--fs, 1));line-height:1.45;
}
#detail.show{display:block}
#detail h3{
  margin:0;padding-right:22px;
  font-family:var(--display, "Barlow Condensed", sans-serif);
  font-weight:600;font-size:calc(18px * var(--fs, 1));
  line-height:1.05;letter-spacing:.02em;
}
#detail h3 span{font-weight:500;color:var(--muted, #64748b);font-size:.82em}
#detail .k{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:calc(10.5px * var(--fs, 1));
  color:var(--muted, #64748b);margin:2px 0 8px;
}
#detail .row{display:flex;gap:8px;font-size:calc(12px * var(--fs, 1));line-height:1.45;margin:2px 0;align-items:flex-start}
#detail .row .l{color:var(--muted, #64748b);flex:none;width:calc(64px * var(--fs, 1))}
#detail .row .v{font-variant-numeric:tabular-nums;min-width:0;word-break:break-word}
#detail .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#detail .chip{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:calc(10px * var(--fs, 1));
  padding:2px 6px;border-radius:6px;
  background:var(--th, #f1f5f9);color:var(--ink, #0d1f38);
}
#detail .note{
  margin-top:8px;padding:6px 8px;border-radius:8px;
  background:var(--warn, #fff7ed);color:var(--warn-ink, #9a3412);
  border-left:3px solid var(--warn-line, #f59e0b);
  font-size:calc(11px * var(--fs, 1));
}
#detail .x{
  position:absolute;right:8px;top:6px;border:0;background:transparent;
  color:var(--muted, #64748b);cursor:pointer;
  font-size:calc(16px * var(--fs, 1));line-height:1;
}
#detail .x:hover{color:var(--ink, #0d1f38)}
#detail .steps{margin:8px 0 0;padding:0;list-style:none}
#detail .steps li{
  display:grid;grid-template-columns:calc(18px * var(--fs, 1)) 1fr;gap:6px;
  font-size:calc(11.5px * var(--fs, 1));line-height:1.4;
  padding:3px 0;border-top:1px solid var(--rule, #334155);
}
#detail .steps li b{font-family:var(--mono, ui-monospace, monospace);font-weight:500;color:var(--accent, #1a6abf)}
#stage{position:relative}
#stage > #detail{position:absolute}