/* diagram.css — v20.4.0 (C9): the diagram element's styles (an extension carries its own stylesheet, included
   by the layout through the registry's `styles`). Colour tokens follow the theme; the SVG's own presentation is
   the author's — only the frame, the controls and the announce line are styled here. */

/* the editor card's accent + palette button */
.element-card.sf-el-diagram  { border-color: var(--bs-info); }
.element-card.sf-el-diagram  .element-type-icon,
.element-card.sf-el-diagram  .element-type-label { color: var(--bs-info); }
.btn-add-el-diagram  { background: #0a6c7f; background: color-mix(in srgb, var(--bs-info) 60%, #000); } /* ≥4.5:1 with white text */

/* the element: the inline SVG scales to the card's width, keeps its viewBox aspect, never overflows a phone */
.sf-diagram { width: 100%; max-width: 100%; }
.sf-diagram .sf-diagram-svg { display: block; width: 100%; height: auto; max-height: 70vh; border-radius: var(--bs-border-radius); }
.sf-diagram .sf-diagram-controls .sf-diagram-trigger[aria-pressed="true"] { background: var(--bs-primary); color: #fff; }
.sf-diagram .sf-diagram-announce { min-height: 1.2em; }
.sf-diagram-card .sf-diagram-caption { font-size: .9rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.sf-diagram-card .sf-diagram-poster-only { width: 100%; max-width: 100%; border-radius: var(--bs-border-radius); display: block; }
/* a bound part moves by transform; a transition would fight the frame scheduler — none. Reduced motion is the
   runtime's job (the timeline jumps to its end); nothing animates from CSS. */
.sf-diagram-binding-table td { vertical-align: middle; }
/* v25.5.0 (A.-000099 #17) — a handle (a part the reader drags or steps to set a dial): the focused part is outlined; dragging, grabbing */
.sf-diagram [data-sf-handle][role="slider"]:focus { outline: none; }
.sf-diagram [data-sf-handle][role="slider"]:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; filter: drop-shadow(0 0 3px var(--bs-primary)); }
.sf-diagram [data-sf-handle][data-sf-dragging] { cursor: grabbing !important; }