/* flowchart-maker: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.chart-label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.fc-tool { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.fc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.fc-shapes { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-tbtn { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 600 0.82rem var(--text); cursor: pointer; }
.fc-tbtn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--mist); }
.fc-tbtn:disabled { opacity: 0.4; cursor: default; }
.fc-tbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fc-tbtn .icon { width: 17px; height: 17px; }
.fc-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.fc-spacer { flex: 1; }
.fc-tpl select { height: 36px; padding: 0 30px 0 10px; }
.fc-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) { .fc-body { grid-template-columns: minmax(0, 1fr) 250px; } }
.fc-stage { position: relative; height: min(68vh, 620px); min-height: 380px; background: #F8FAFC; overflow: hidden; }
.fc-stage svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.fc-stage svg:active { cursor: grabbing; }
.fc-node { cursor: move; }
.fc-node .fc-h { fill: #FFFFFF; stroke: #FF5A1F; stroke-width: 2; opacity: 0; cursor: crosshair; transition: opacity 0.12s; }
.fc-node:hover .fc-h, .fc-node.is-sel .fc-h { opacity: 1; }
.fc-node.is-from > :first-child { stroke: #FF5A1F; stroke-width: 3; }
.fc-resize { cursor: nwse-resize; }
.fc-edit { position: absolute; z-index: 2; box-sizing: border-box; margin: 0; padding: 6px; border: 2px solid #FF5A1F; border-radius: 6px; background: #FFFFFF; color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.28; text-align: center; resize: none; overflow: hidden; outline: none; }
.fc-hint { position: absolute; left: 12px; bottom: 10px; margin: 0; padding: 5px 10px; border-radius: 8px; background: rgb(255 255 255 / 0.9); color: var(--slate); font-size: 0.8rem; pointer-events: none; }
.fc-panel { padding: 14px; border-left: 1px solid var(--line); background: var(--paper); }
@media (max-width: 979px) { .fc-panel { border-left: 0; border-top: 1px solid var(--line); } }
.fc-panel > div { display: flex; flex-direction: column; gap: 12px; }
.fc-panel-title { margin: 0; font-weight: 700; }
.fc-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fc-color { aspect-ratio: 1; padding: 0; border: 2px solid; border-radius: 8px; cursor: pointer; }
.fc-color[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.fc-quick { display: flex; gap: 6px; }
.fc-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.fc-foot .status { margin: 0; }