/* /flowchart-maker/ page styles. Built from /assets/polyatic.css tokens only (no new fonts or theme colours).
   Box fills are the visitor's own content (a light palette chosen per shape), set on the SVG by app.js. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.fc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fc-head .sub{margin-bottom:1rem}
@media(max-width:520px){.fc-head h1{font-size:1.5rem;margin-bottom:0.125rem}.fc-head .sub{font-size:0.875rem;margin-bottom:0.625rem}}
.fc-page .k{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* phone: text, chart, side. desktop: text + side on the left, the chart large on the right */
.fc-duo{display:grid;gap:0.875rem;align-items:start;grid-template-areas:"text" "chart" "side"}
.fc-textcard{grid-area:text}.fc-chartcard{grid-area:chart}.fc-side{grid-area:side}
@media(min-width:920px){.fc-duo{grid-template-columns:minmax(17rem,21rem) minmax(0,1fr);grid-template-areas:"text chart" "side chart";grid-template-rows:auto 1fr;gap:1.25rem 1.5rem}}
.fc-textcard,.fc-chartcard,.fc-side{min-width:0}
.fc-textcard,.fc-side{display:grid;gap:0.5rem;align-content:start}
@media(max-width:520px){.fc-textcard,.fc-chartcard,.fc-side{padding:0.75rem}}
@media(min-width:920px){.fc-chartcard{position:sticky;top:1rem}}

.fc-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.fc-help:empty{display:none}
.fc-help code,.fc-syn code,.fc-syntab code,.explainer code{font-family:var(--mono);font-size:0.75rem}
.fc-count{color:var(--ink-2)}
.fc-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.fc-row .btn{flex:1 1 auto}
.fc-row select{flex:1 1 7rem;min-width:0}
.fc-inline{font-size:0.8125rem;color:var(--muted)}
.fc-side .field{display:grid;gap:0.5rem}
.fc-side .field>.k{display:block;margin:0}
.fc-modes{margin-bottom:0}
.fc-filebtn{cursor:pointer;display:inline-flex;align-items:center}
#importfile:focus-visible+.fc-filebtn,.fc-filebtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.fc-row input[type=text]{flex:1 1 9rem;min-width:0}
#shareurl{font-family:var(--mono);font-size:0.75rem}
.fc-side textarea{width:100%;min-height:3.5rem;resize:vertical;font-family:var(--mono);font-size:0.75rem}

.fc-notice{margin:0 0 1rem;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.fc-notice[hidden]{display:none}
.fc-notice .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.fc-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}

/* the text box */
.fc-texthead{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;flex-wrap:wrap}
.fc-syn{display:flex;gap:0.25rem;flex-wrap:wrap;color:var(--ink-2)}
.fc-syn code{padding:0.0625rem 0.3125rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface-2)}
.fc-textcard textarea{width:100%;height:6.25rem;min-height:4.5rem;resize:vertical;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;white-space:pre;overflow-x:auto}
@media(min-width:920px){.fc-textcard textarea{height:13rem}}
.fc-syntab{display:none;border-collapse:collapse;font-size:0.8125rem;color:var(--ink-2)}
.fc-syntab caption{text-align:left;font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0.25rem 0}
.fc-syntab td{padding:0.25rem 0.5rem 0.25rem 0;border-top:1px solid var(--line);vertical-align:top}
@media(min-width:920px){.fc-syntab{display:table}}

/* toolbar */
.fc-tools{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center;margin-bottom:0.5rem}
.fc-tools .chip{padding:0.375rem 0.625rem;font-size:0.8125rem;min-width:2.25rem}
.fc-tools .chip:disabled{opacity:.45;cursor:default}
.fc-tools .modes button{padding:0.375rem 0.625rem;font-size:0.8125rem;white-space:nowrap}
.fc-grow{flex:1 1 0}
@media(max-width:520px){.fc-tools{flex-wrap:nowrap;gap:0.3125rem}.fc-tools .chip{padding:0.375rem 0.5rem}.fc-tools .fc-zoom{display:none}.fc-tools .modes button{padding:0.375rem 0.4375rem}}

/* the chart */
.fc-stage{position:relative;height:19rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);overflow:hidden}
@media(min-width:521px){.fc-stage{height:26rem}}
@media(min-width:920px){.fc-stage{height:min(40rem,calc(100vh - 11rem))}}
.fc-svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;font-family:var(--sans)}
.fc-maphelp{margin-top:0.375rem}
.fc-edge{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fc-arrow{fill:var(--ink-2)}
.fc-lab{fill:var(--surface);stroke:var(--line-2)}
.fc-labtext{fill:var(--ink);font-size:12px;text-anchor:middle;pointer-events:none}
.fc-node{cursor:pointer;outline:none}
.fc-shape{stroke-width:1.6}
.fc-text{font-size:14px;text-anchor:middle;pointer-events:none}
.fc-node.is-sel .fc-shape,.fc-node:focus-visible .fc-shape{stroke:var(--accent);stroke-width:3.5}

/* step editor */
.fc-editor{display:grid;gap:0.5rem;margin-top:0.625rem;padding:0.75rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface)}
.fc-editor[hidden]{display:none}
.fc-editor input[type=text]{width:100%}
.fc-editor .field>.k{display:block;margin-bottom:0.25rem}
.fc-editor .chip{padding:0.375rem 0.625rem;font-size:0.8125rem}
.fc-editor .modes button{font-size:0.8125rem}
.fc-arrows{list-style:none;margin:0;padding:0;display:grid;gap:0.25rem;font-size:0.875rem}
.fc-arrows:empty::after{content:"None yet.";color:var(--muted);font-size:0.8125rem}
.fc-arrows li{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;min-width:0}
.fc-arrows span{overflow-wrap:anywhere}

/* colours per shape */
.fc-colors{display:grid;gap:0.375rem}
.fc-colrow{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.fc-colname{flex:0 0 7rem;font-size:0.8125rem;color:var(--ink-2)}
.fc-swatches{display:flex;flex-wrap:wrap;gap:0.25rem}
.fc-swatch{width:2rem;height:2rem;padding:0.1875rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.fc-swatch svg{width:100%;height:100%;display:block}
.fc-swatch[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:1px}

.fc-pre{font-family:var(--mono);font-size:0.8125rem;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;padding:0.75rem 1rem;overflow-x:auto;max-width:100%}