/*! StiffStruct, (c) 2026 Mohammad Asad. All rights reserved. Proprietary: copying, mirroring or reusing this code is not permitted without written permission (see terms.html#intellectual-property). build 20261018-2109 */
/* 2D editor / results canvas (js/ui/editor2d.js). Scene styles (members, supports, loads, diagrams)
   live in RENDER2D_CSS inside js/ui/render2d.js so standalone report figures carry them too. */

.ed2d {
  container: ed2d / inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  background: var(--bg-elev);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: var(--font-ui);
}
.ed2d-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.ed2d-svg:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.ed2d-svg.is-space, .ed2d-svg.is-space * { cursor: grab !important; }
.ed2d-svg.is-panning, .ed2d-svg.is-panning * { cursor: grabbing !important; }
.ed2d-svg.is-dragging { cursor: grabbing; }

/* only the dedicated hit shapes take pointer events — hit testing is geometric otherwise */
.ed2d-scene * { pointer-events: none; }
.ed2d-scene .ed2d-hit { pointer-events: stroke; }
.ed2d-scene .ed2d-hitbox { pointer-events: all; }
.ed2d-ui, .ed2d-ui * { pointer-events: none; }

/* interaction layer */
.ed2d-ui .snap { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.ed2d-ui .snap.on-node { stroke-width: 2; fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.ed2d-ui .ghost { stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 7 5; stroke-linecap: round; }
.ed2d-ui .band { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.ed2d-ui .guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.ed2d-ui .probe { stroke: var(--fg); stroke-width: 1.2; stroke-dasharray: 3 2; fill: none; }
.ed2d-ui .probe-dot { fill: var(--bg-elev); stroke: var(--fg); stroke-width: 2; }
.ed2d-ui .pill rect { fill: var(--fg); opacity: 0.88; }
.ed2d-ui .pill text { fill: var(--bg-elev); font-size: 11px; font-family: var(--font-mono); }

/* top toolbars */
.ed2d-bar {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: flex-start; gap: 8px;
  pointer-events: none; z-index: 3;
}
.ed2d-tb {
  pointer-events: auto;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ed2d-tb::-webkit-scrollbar { display: none; }
.ed2d-tb .btn { flex: none; white-space: nowrap; }
.ed2d-tb .btn[aria-pressed="true"], .ed2d-tb .btn[aria-checked="true"] {
  background: var(--accent-soft); color: var(--accent-text, var(--accent));
}
.ed2d-tb-right { flex: none; }
.ed2d-spacer { flex: 1 1 auto; }
.ed2d-sep { flex: none; width: 1px; align-self: stretch; margin: 3px 4px; background: var(--border); }
.ed2d-scales { display: flex; gap: 1px; }
.ed2d-scale { min-width: 34px; justify-content: center; font-variant-numeric: tabular-nums; }
.ed2d-viewbtn.has-filter::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 2px;
}

.ed2d-sub { position: absolute; top: 56px; left: 10px; right: 10px; display: flex; pointer-events: none; z-index: 3; }
.ed2d-sub[hidden] { display: none; }
.ed2d-preset .wg-ic { color: var(--support); }
.ed2d-preset[aria-checked="true"] .wg-ic { color: inherit; }

/* bottom: caption (left), coordinates + zoom (right) */
.ed2d-caption {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  max-width: calc(100% - 250px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 5px 10px;
  font-size: 12px; color: var(--fg-muted);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  pointer-events: none;
}
.ed2d-caption[hidden], .ed2d-caption:empty { display: none; }
.ed2d-hint { color: var(--fg-muted); }
.ed2d-lg { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); }
.ed2d-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ed2d-sw-t { background: var(--tension); }
.ed2d-sw-c { background: var(--compression); }
.ed2d-sw-z { background: var(--zero-force); }

.ed2d-br { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.ed2d-coords {
  font: 11.5px/1 var(--font-mono); color: var(--fg-muted);
  padding: 6px 8px; min-width: 120px; text-align: right;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ed2d-coords:empty { display: none; }
.ed2d-coords span { color: var(--fg-subtle, var(--fg-muted)); }
.ed2d-zoom {
  display: flex; gap: 1px; padding: 3px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
}

/* tooltip */
.ed2d-tip {
  position: absolute; left: 0; top: 0; z-index: 7;
  pointer-events: none;
  max-width: 280px;
  padding: 6px 9px;
  font-size: 12px; line-height: 1.35;
  color: var(--bg-elev); background: var(--fg);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ed2d-tip[hidden] { display: none; }
.ed2d-tip span { opacity: 0.75; }

/* messages / empty state */
.ed2d-msg { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.ed2d-msg[hidden] { display: none; }
.ed2d-msg-card {
  pointer-events: none;   /* clicks pass through to the canvas (you can draw "under" the hint) */
  max-width: 400px; padding: 20px 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--shadow-2);
}
.ed2d-msg-ic {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
}
.ed2d-msg-card.err .ed2d-msg-ic { color: var(--danger); background: var(--danger-soft, color-mix(in srgb, var(--danger) 12%, transparent)); }
.ed2d-msg-title { font-weight: 600; font-size: 14px; color: var(--fg); }
.ed2d-msg-text { font-size: 13px; color: var(--fg-muted); line-height: 1.45; }
.ed2d-msg-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.ed2d-msg-actions:empty { display: none; }
.ed2d-msg-actions .btn { pointer-events: auto; }

/* popovers */
.ed2d-pop {
  position: absolute; z-index: 6;
  width: 300px; max-width: calc(100% - 16px);
  padding: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  user-select: text; -webkit-user-select: text;
  touch-action: auto;
}
.ed2d-pop.is-docked { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 75%; overflow: auto; }
.ed2d-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ed2d-pop-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
.ed2d-pop-foot { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); }
.ed2d-pop .ed2d-del { color: var(--danger); }
.ed2d-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed2d-row-lbl { font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.ed2d-row-hint { font-size: 11.5px; color: var(--fg-subtle, var(--fg-muted)); }
.ed2d-row .seg { align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
.ed2d-row .wg-num, .ed2d-row .select { width: 100%; }
.ed2d-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }

/* view options */
.ed2d-viewpop {
  position: absolute; z-index: 6;
  width: 250px; max-width: calc(100% - 16px);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2);
  font-size: 13px;
  touch-action: auto;
}
.ed2d-viewpop-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ed2d-viewpop-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 8px; }

.ed2d-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.ed2d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* compact layouts */
@media (max-width: 1100px) {
  .ed2d-tool .lbl, .ed2d-preset .lbl { display: none; }
}
@media (max-width: 760px) {
  .ed2d-ov .icon { display: none; }
  .ed2d-caption { max-width: calc(100% - 20px); bottom: 54px; }
  .ed2d-coords { display: none; }
  .ed2d-viewbtn .lbl { display: none; }
}
/* the canvas width (not the window) decides: with both side panels open it is far narrower than the viewport */
@container ed2d (max-width: 760px) {
  .ed2d-ov .icon { display: none; }
  .ed2d-viewbtn .lbl { display: none; }
}
@media (max-width: 480px) {
  .ed2d-bar { top: 6px; left: 6px; right: 6px; gap: 4px; flex-wrap: wrap; }
  .ed2d-tb-right { order: -1; margin-left: auto; }
  .ed2d-sub { top: auto; bottom: 54px; left: 6px; right: 6px; }
  .ed2d-scale { min-width: 30px; padding: 0 6px; }
}
@media (pointer: coarse) {
  .ed2d-tb .btn-sm { height: 34px; }
  .ed2d-tb .btn-sm.btn-icon, .ed2d-zoom .btn-icon { width: 34px; }
}