/* House style for {{< diagram >}} figures (layouts/shortcodes/diagram.html); loaded by baseof.html only on pages that use it. */
.ws-diagram { margin: 2rem 0 2.5rem 0; max-width: 860px; }
.ws-diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ws-diagram svg { display: block; width: 100%; min-width: 620px; height: auto; font-family: 'Open Sans', sans-serif; }
.ws-diagram figcaption { color: #64748b; font-size: 0.9rem; margin-top: 0.6rem; }
.ws-diagram text { fill: #0f172a; font-size: 18px; }
.ws-diagram .d-h { font-size: 21px; font-weight: 600; }
.ws-diagram .d-s { font-size: 15px; }
.ws-diagram .d-b { font-weight: 600; }
.ws-diagram .d-muted { fill: #64748b; }
.ws-diagram .d-white { fill: #fff; }
.ws-diagram .d-tblue { fill: #0094CA; }
.ws-diagram .d-tred { fill: #DC2626; }
.ws-diagram .d-card { fill: #fff; stroke: #cbd5e1; stroke-width: 2; }
.ws-diagram .d-panel { fill: #f1f5f9; }
.ws-diagram .d-tint { fill: #E3F4FB; }
.ws-diagram .d-blue { fill: #0094CA; }
.ws-diagram .d-navy { fill: #0f172a; }
.ws-diagram .d-orange { fill: #F18642; }
.ws-diagram .d-grey { fill: #cbd5e1; }
.ws-diagram .d-line { stroke: #94a3b8; stroke-width: 2; fill: none; }
.ws-diagram .d-bline { stroke: #0094CA; stroke-width: 3; fill: none; }
.ws-diagram .d-dash { stroke-dasharray: 6 6; }
.ws-diagram .d-x { stroke: #DC2626; stroke-width: 4; stroke-linecap: round; }
.ws-diagram .d-redline { stroke: #DC2626; stroke-width: 3; fill: none; }

/* Phones: show the portrait variant when there is one (no sideways scrolling); otherwise the desktop version scrolls. */
.ws-diagram .d-mob { display: none; }
.ws-diagram .d-mob svg { min-width: 0; max-width: 480px; margin: 0 auto; }
@media (max-width: 700px) {
  .ws-diagram.has-mobile .d-desk { display: none; }
  .ws-diagram.has-mobile .d-mob { display: block; }
}

/* Bulma's ".content figure" adds 2em side margins, which shrinks diagrams (most noticeably on phones). */
.content figure.ws-diagram { margin-left: 0; margin-right: 0; }

/* Product screenshots ({{< screenshot >}}): same rhythm as the diagrams. */
.content figure.ws-shot { margin: 2rem 0 2.5rem 0; max-width: 860px; }
.ws-shot img { display: block; width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 6px 24px rgba(15, 23, 42, .10); }
.ws-shot figcaption { color: #64748b; font-size: 0.9rem; margin-top: 0.6rem; }
.ws-shot .ws-shot-note { display: block; font-size: 0.8rem; color: #94a3b8; margin-top: 0.2rem; }