/* The sandbox post's stack figure (layouts/shortcodes/stackfig.html, static/js/stack-figure.js): the drawing
   with the security properties on its side; on a phone the properties sit above it. */
.sf { display: flex; gap: var(--sp-4); align-items: flex-start; }
.sf-svg { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; display: block; }
.sf-modes { flex: 0 0 168px; display: flex; flex-direction: column; gap: var(--sp-2); order: 2; }
.sf-modes .sf-head { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }
.sf-mode { font: inherit; text-align: left; cursor: pointer; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px; padding: var(--sp-2) var(--sp-3); min-height: 44px; }
.sf-mode b { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.sf-mode span { display: block; font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }
.sf-mode[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sf-mode:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) {
  .sf { flex-direction: column; }
  .sf-modes { order: 0; flex: none; flex-direction: row; flex-wrap: wrap; }
  .sf-modes .sf-head { flex-basis: 100%; }
  .sf-mode { flex: 1 1 40%; }
}