/* ── Diagram Maker – visual tool module CSS ──
   Loaded after shared-ui.css via asset.php.
   Adds padding/styling for elements shared-ui.css doesn't target directly.
── */

/* Eyebrow badge */
.m-eyebrow{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#635bff;background:rgba(99,91,255,.08);padding:4px 12px;border-radius:999px;margin-bottom:14px}

/* Title input row — direct child of m-card, add container padding */
.m-card>.m-title-row{padding:20px 24px 16px}

/* Diagram title preview (shown/hidden by JS) */
.m-preview-title{margin:0;padding:12px 24px 8px;font-size:1.05rem;font-weight:800;color:#0f172a}

/* Canvas scroll area */
.dm-scroll{overflow:auto;max-height:70vh;border-top:1px solid #e5e5ea}
.dm-surface{position:relative;min-width:100%;min-height:560px}
#lineLayer{position:absolute;inset:0}
#nodeLayer{position:absolute;inset:0}

/* Draggable nodes */
.dm-node{position:absolute;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:8px;cursor:move;min-width:140px;min-height:70px;font-family:inherit;font-size:.9rem;color:#1c1c1e}
.dm-node.selected{border-color:#635bff;box-shadow:0 0 0 3px rgba(99,91,255,.12)}

/* Note text below canvas */
.m-note{padding:10px 24px 16px;margin:0;border-top:1px solid #f2f2f7;color:#6e6e73;font-size:.84rem}

@media print{
  .wn-hamburger,.wn-hamburger-panel,.m-actions,.m-note,.wn-site-footer{display:none!important}
  .dm-scroll{max-height:none;border:none}
  .m-card{box-shadow:none!important;border:0!important}
}