/* FlowCAD3D — 3D modeller (js/ui/modeler.js): full window over the application; menus (z 60), dialogs (z 70) and
   messages (z 95) stay above it. */
.mdl { position: fixed; inset: 0; z-index: 58; display: grid; grid-template-columns: 96px 1fr 350px; grid-template-rows: 56px 1fr;
  grid-template-areas: "head head head" "left mid right"; background: var(--bg); color: var(--fg); }
body.ce-open { overflow: hidden; }
.mdl-head { grid-area: head; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--header-bg); color: var(--header-fg); min-width: 0; }
.mdl-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mdl-t1 { font-weight: 700; font-size: 14px; }
.mdl-t2 { font-size: 12px; color: var(--header-fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-bar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-end; }
.mdl-bar .btn { color: var(--header-fg); border-color: var(--header-line); background: transparent; white-space: nowrap; }
.mdl-bar .btn:hover { background: var(--header-hover); }
.mdl-bar .btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.mdl-bar .btn:disabled { opacity: .45; }
.mdl-sep { flex: 0 0 1px; height: 26px; background: var(--header-line); margin: 0 4px; }

/* tools */
.mdl-left { grid-area: left; overflow-y: auto; overflow-x: hidden; padding: 6px 5px 12px; background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.mdl-tb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--fg); font: inherit; font-size: 11px; line-height: 1.15; cursor: pointer; text-align: center; }
.mdl-tb svg { width: 22px; height: 22px; flex: 0 0 auto; }
.mdl-tb span { max-width: 100%; }
.mdl-tb:hover { background: var(--bg3); }
.mdl-tb.active { background: var(--accentbg); border-color: var(--accent); color: var(--fg); }
.mdl-tb:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mdl-tsep { height: 1px; background: var(--line); margin: 4px 6px; flex: 0 0 auto; }
.mdl-swatch { align-self: center; width: 36px; height: 26px; border-radius: 7px; border: 2px solid var(--line2); cursor: pointer; margin-top: 4px; }
.mdl-palmenu .mi { min-height: 30px; }
.mdl-dot { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .25); margin-right: 8px; }

/* viewport */
.mdl-mid { grid-area: mid; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.mdl-vp { position: absolute; inset: 0; background: var(--vp-bg); }
.mdl-vp canvas { display: block; touch-action: none; outline: none; }
.mdl-vp.mdl-tool-line canvas, .mdl-vp.mdl-tool-rect canvas, .mdl-vp.mdl-tool-circle canvas, .mdl-vp.mdl-tool-polygon canvas, .mdl-vp.mdl-tool-arc canvas, .mdl-vp.mdl-tool-tape canvas, .mdl-vp.mdl-tool-joint canvas, .mdl-vp.mdl-tool-move canvas, .mdl-vp.mdl-tool-rotate canvas, .mdl-vp.mdl-tool-scale canvas { cursor: crosshair; }
.mdl-vp.mdl-tool-pushpull canvas, .mdl-vp.mdl-tool-offset canvas, .mdl-vp.mdl-tool-followme canvas { cursor: pointer; }
.mdl-vp.mdl-tool-eraser canvas { cursor: cell; }
.mdl-vp.mdl-tool-paint canvas { cursor: copy; }
.mdl-vp.mdl-tool-orbit canvas { cursor: var(--cur-grab); }
.mdl-vp.mdl-tool-pan canvas { cursor: move; }
.mdl-vbar { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; align-items: center; padding: 4px; background: var(--overlay-bg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); }
.mdl-vbar .btn.active { background: var(--accentbg); border-color: var(--accent); }
.mdl-hint { position: absolute; left: 10px; bottom: 10px; right: 330px; padding: 8px 12px; background: var(--overlay-bg); border: 1px solid var(--line2); border-radius: 10px; font-size: 13px; color: var(--fg2); box-shadow: var(--shadow); pointer-events: none; min-height: 18px; }
.mdl-vcb { position: absolute; right: 10px; bottom: 10px; width: 300px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--overlay-bg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); }
.mdl-vcbl { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--fg2); min-width: 72px; }
.mdl-vcbi { flex: 1 1 auto; min-height: 30px; font-variant-numeric: tabular-nums; }
.mdl-box { position: absolute; border: 1px solid #2F7DF6; background: rgba(47, 125, 246, .08); pointer-events: none; }
.mdl-box.cross { border-style: dashed; background: rgba(22, 163, 74, .08); border-color: #16A34A; }
/* snap marker and its label (inference) */
.mdl-snap { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; border: 2px solid #16A34A; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.mdl-snap.mdl-vertex { border-color: #16A34A; }
.mdl-snap.mdl-origin { border-color: #111827; }
.mdl-snap.mdl-mid { border-color: #06B6D4; }
.mdl-snap.mdl-center { border-color: #16A34A; background: #16A34A; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.mdl-snap.mdl-edge, .mdl-snap.mdl-cross { border-color: #DC2626; border-radius: 2px; }
.mdl-snap.mdl-face { border-color: #2563EB; border-radius: 2px; transform: rotate(45deg); }
.mdl-snap.mdl-axis, .mdl-snap.mdl-locked, .mdl-snap.mdl-align { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-color: #111827; border-radius: 1px; }
.mdl-snap.mdl-parallel, .mdl-snap.mdl-perp { border-color: #D946EF; border-radius: 2px; }
.mdl-snap.mdl-guide, .mdl-snap.mdl-guidept { border-color: #475569; border-radius: 2px; }
.mdl-tip { position: absolute; pointer-events: none; padding: 3px 7px; border-radius: 6px; background: #111827; color: #F9FAFB; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }

/* panels */
.mdl-right { grid-area: right; display: flex; flex-direction: column; min-height: 0; background: var(--bg2); border-left: 1px solid var(--line); }
.mdl-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.mdl-tab { flex: 1 1 auto; padding: 8px 2px; min-width: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fg2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.mdl-panel { overflow: auto; padding: 10px 12px 16px; flex: 1 1 auto; }
.mdl-panel .grp { margin-bottom: 10px; }
.mdl-btns { gap: 6px; margin: 8px 0 4px; }
.mdl-pal { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; align-items: center; }
.mdl-palc { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .25); cursor: pointer; padding: 0; }
.mdl-palc.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.mdl-palc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mdl-palpick { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line2); border-radius: 6px; background: transparent; cursor: pointer; }
.mdl-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.mdl-li { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent; }
.mdl-li.sel { background: var(--accentbg); border-color: var(--accent); }
.mdl-li.hid .mdl-lt { opacity: .5; }
.mdl-lim { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 0; background: transparent; color: var(--fg); text-align: left; cursor: pointer; font: inherit; border-radius: 8px; }
button.mdl-li.mdl-lim { border: 1px solid transparent; }
.mdl-lim:hover { background: var(--bg3); }
.mdl-sw { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); }
.mdl-jicon { flex: 0 0 auto; display: inline-flex; color: var(--ok); }
.mdl-jicon svg { width: 16px; height: 16px; }
.mdl-lt { display: flex; flex-direction: column; min-width: 0; }
.mdl-lt .t1 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-lt .t2 { font-size: 12px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-eye { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--fg2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mdl-eye:hover { background: var(--bg3); }
.mdl-eye svg { width: 17px; height: 17px; }
.mdl-keys { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 8px; align-items: center; font-size: 13px; }
.mdl-keys kbd { display: inline-block; min-width: 22px; text-align: center; padding: 1px 5px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); font: inherit; font-size: 12px; }
.ce-open-list { display: flex; flex-direction: column; gap: 4px; }
.ce-open-list .li { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--fg); cursor: pointer; text-align: left; }
.ce-open-list .li:hover { border-color: var(--accent); }
.ce-open-list .t2 { font-size: 12px; color: var(--fg3); }
@media (max-width: 1150px) {
  .mdl { grid-template-columns: 88px 1fr 300px; }
  .mdl-bar .lbl { display: none; }
  .mdl-hint { right: 320px; }
}
@media (max-width: 820px) {
  .mdl { grid-template-columns: 1fr; grid-template-rows: 56px auto 52vh auto; grid-template-areas: "head" "left" "mid" "right"; overflow: auto; }
  .mdl-left { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .mdl-tb { min-width: 64px; }
  .mdl-tsep { width: 1px; height: auto; margin: 4px 2px; }
  .mdl-right { border-left: 0; border-top: 1px solid var(--line); }
  .mdl-hint { right: 10px; bottom: 60px; }
  .mdl-vcb { left: 10px; right: 10px; width: auto; }
}