/* =====================================================================
   GpxilStudio – the Tools tab, the workflows and the map of the formats.
   Built on app.css (the tokens: --ink, --line, --accent …), genomics.css,
   nb-ai.css, pipe.css and wb.css. The Viewer tab is in viewer.css.
   ===================================================================== */
.pw-root { height: 100%; min-height: 0; }

/* ---------------- the tab bar: the five tabs keep their names until the bench is narrow ---------------- */
@container bench (max-width: 1020px) {
  .wb-tab:not(.on) .lbl { display: inline; }
}
@container bench (max-width: 640px) {
  .wb-tab:not(.on) .lbl { display: none; }
}

/* ---------------- the Tools tab ---------------- */
.tl-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tl-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 42px; }
.tl-crumb { font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-navbtn { display: none; }
.tl-py { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font: 12px var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.tl-py:hover { border-color: var(--line-2); }
.tl-body { flex: 1; display: flex; min-height: 0; }
.tl-nav { width: 250px; flex: none; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel-2); padding: 8px 6px 40px; }
.tl-group { margin-bottom: 10px; }
.tl-gh { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tl-gh .ic { width: 15px; height: 15px; }
.tl-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-s); background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.tl-item small { color: var(--muted); font: 11px var(--mono); }
.tl-item:hover { background: var(--panel); }
.tl-item.on { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.tl-main { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 26px 80px; }
.tl-main > * { max-width: 980px; }
.tl-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 21px; }
.tl-toolhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.tl-pkg { font: 12px var(--mono); padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); }
.tl-lead { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.tl-sub { margin: 22px 0 8px; font-size: 15.5px; }
.tl-h4 { margin: 14px 0 6px; font-size: 14px; }
.tl-about { margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); font-size: 13.5px; line-height: 1.55; }
.tl-about summary { cursor: pointer; color: var(--accent-2); font-weight: 600; }
.tl-about p { margin: 8px 0 2px; }
.tl-form { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.tl-form + .tl-form { margin-top: 12px; }
.tl-field { display: grid; gap: 4px; }
.tl-field[hidden] { display: none; }
.tl-label { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.tl-input { width: 100%; max-width: 640px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: #fff; font: 14px var(--font); color: var(--ink); }
.tl-input.mono { font: 13px var(--mono); }
.tl-input.small { width: auto; max-width: 100%; padding: 4px 6px; font-size: 13px; }
.tl-input:focus, .tl-colour:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea.tl-input { font: 13px var(--mono); resize: vertical; }
.tl-colour { width: 52px; height: 30px; padding: 0 2px; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: #fff; }
.tl-help { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tl-help code { font-size: 12px; }
.tl-checkline { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; line-height: 1.4; }
.tl-checkline input { margin-top: 3px; }
.tl-picker { display: grid; gap: 4px; }
.tl-pickbtns { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.tl-pickbtns .linkbtn, .tl-facts .linkbtn, .tl-walk { display: inline-flex; align-items: center; gap: 4px; }
.tl-pickbtns .ic, .tl-facts .ic, .tl-walk .ic { width: 14px; height: 14px; }
.tl-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.tl-run { min-width: 110px; }
.tl-run.running .ic { animation: tl-pulse 1s infinite; }
@keyframes tl-pulse { 50% { opacity: 0.3; } }
.tl-check { font-size: 13px; color: var(--act); }
.tl-multi { display: grid; gap: 6px; max-width: 640px; }
.tl-multilist { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.tl-multilist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); font-size: 13px; }
.tl-multilist li.muted { border-style: dashed; background: none; }
.tl-multiadd { display: flex; gap: 6px; }
.tl-same { margin-top: 14px; }
.tl-samebox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tl-samebox > summary { display: flex; align-items: center; gap: 6px; padding: 9px 12px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.tl-samebox > summary .ic { width: 16px; height: 16px; color: var(--accent); }
.tl-samebox[open] > summary { border-bottom: 1px solid var(--line); }
.tl-samebox > .tl-help { margin: 0 12px 12px; }
.tl-code { padding: 8px 12px 4px; }
.tl-code-t { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.tl-code .code-box { margin: 0; }
.tl-result { margin-top: 14px; display: grid; gap: 10px; }
.tl-result:empty { display: none; }
.tl-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.tl-done { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tl-done.ok { color: var(--good); }
.tl-done.bad { color: var(--bad); }
.tl-pre { margin: 0; padding: 10px 12px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); font: 12.5px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; }
.tl-pre.err { background: var(--warn-soft); border-color: #f0dca6; color: var(--warn); }
.tl-pre.tl-main-out { background: #fff; max-height: 600px; white-space: pre; }
.tl-fail { padding: 8px 12px; border: 1px solid #f1c2bf; border-radius: var(--radius-s); background: var(--bad-soft); color: var(--bad); font-size: 13.5px; }
.tl-warn { padding: 8px 12px; border: 1px solid #f0dca6; border-radius: var(--radius-s); background: var(--warn-soft); color: var(--warn); font-size: 13.5px; line-height: 1.45; }
.tl-warn .tl-pre { margin: 6px 0; background: #fff; color: var(--ink); }
.tl-ok { padding: 6px 12px; border: 1px solid #bfe3cd; border-radius: var(--radius-s); background: var(--good-soft); color: var(--good); font-size: 13.5px; }
.tl-tb summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.tl-files { display: grid; gap: 6px; }
.tl-filechip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); }
.tl-fname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tl-fname code { font-size: 12.5px; word-break: break-all; }
.tl-fname .ic { flex: none; color: var(--accent); }
.tl-fkind { font-size: 12px; color: var(--muted); }
.tl-facts { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 12.5px; }
.tl-next { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-verdict { padding: 9px 12px; border-radius: var(--radius-s); font-size: 14px; }
.tl-verdict.ok { background: var(--good-soft); color: var(--good); border: 1px solid #bfe3cd; }
.tl-verdict.bad { background: var(--bad-soft); color: var(--bad); border: 1px solid #f1c2bf; }
.tl-findings { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-findings th { text-align: left; font-size: 12px; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.tl-findings td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.tl-findings td code { font-size: 11.5px; word-break: break-all; }
.tl-findings tr.error td:first-child { color: var(--bad); }
.tl-findings tr.warning td:first-child { color: var(--warn); }
.tl-findings tr.info td:first-child { color: var(--muted); }
.tl-findings .ic { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); font-size: 13.5px; }
.tl-summary dt { color: var(--muted); }
.tl-summary dd { margin: 0; }
.tl-info { margin-bottom: 8px; }
.tl-conds { margin-top: 6px; }
.tl-condtable { border-collapse: collapse; font-size: 13px; margin: 2px 0 6px; }
.tl-condtable th { text-align: left; font-size: 12px; color: var(--muted); padding: 3px 10px 3px 0; }
.tl-condtable td { padding: 3px 10px 3px 0; vertical-align: top; }
.tl-gap { color: var(--act); }
.tl-okmark { display: inline-flex; color: var(--good); vertical-align: -3px; }
.tl-okmark .ic { width: 16px; height: 16px; }
.tl-condnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--act); }

/* the first page */
.tl-mapbox { margin: 4px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 6px; }
.tl-maphint { min-height: 1.4em; margin: 6px 2px 0; font-size: 13px; color: var(--ink-2); }
.tl-kindpanel:empty { display: none; }
.tl-chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tl-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.tl-choice b { font-size: 14px; }
.tl-choice small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.tl-choice:hover, .tl-choice:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.tl-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.tl-task { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.tl-task-h { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.35; }
.tl-task-h .ic { flex: none; color: var(--accent); margin-top: 1px; }
.tl-steps { margin: 8px 0 4px; padding-left: 22px; font-size: 13.5px; }
.tl-steps li { margin: 2px 0; }
.tl-steps .linkbtn { text-align: left; }
.tl-walk { font-size: 12.5px; }
.tl-wfnote { display: grid; justify-items: start; gap: 6px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--panel); }
.tl-wfnote p { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 70ch; }
.tl-foot { margin-top: 18px; font-size: 12.5px; }

/* the map */
.pw-map svg { display: block; width: 100%; height: auto; }
.pw-map[data-layout="wide"] svg { max-height: 440px; }
.pw-map[data-layout="tall"] svg { max-width: 560px; margin: 0 auto; }
.pw-map .pm-node rect { fill: #fff; stroke: var(--line-2); stroke-width: 1.5; }
.pw-map .pm-node.main rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.pw-map .pm-node { cursor: pointer; outline: none; }
.pw-map .pm-node:hover rect, .pw-map .pm-node:focus-visible rect, .pw-map .pm-node.on rect { stroke: var(--accent); stroke-width: 2.5; }
.pw-map .pm-title { font: 600 15px var(--font); fill: var(--ink); }
.pw-map .pm-sub { font: 12px var(--font); fill: var(--muted); }
.pw-map .pm-route { cursor: pointer; outline: none; }
.pw-map .pm-hit { fill: none; stroke: transparent; stroke-width: 16; }
.pw-map .pm-edge { fill: none; stroke: #9aa7b8; stroke-width: 2; transition: stroke 0.15s, stroke-width 0.15s, opacity 0.15s; }
.pw-map .pm-route.dashed .pm-edge { stroke-dasharray: 5 4; }
.pw-map .pm-label { font: 12.5px var(--mono); fill: var(--ink-2); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.pw-map .pm-label .pm-more { font-size: 11.5px; fill: var(--muted); }
.pw-map .pm-head { fill: #9aa7b8; }
.pw-map .pm-head.on { fill: var(--accent); }
.pw-map .pm-dot { fill: var(--accent); opacity: 0.55; }
.pw-map .pm-route.on .pm-edge { stroke: var(--accent); stroke-width: 3; }
.pw-map .pm-route.on .pm-label { fill: var(--accent-2); font-weight: 700; }
.pw-map .pm-route.off .pm-edge, .pw-map .pm-route.off .pm-label { opacity: 0.35; }
.pw-map .pm-route.off .pm-dot { opacity: 0.15; }
.pw-map .pm-route:focus-visible .pm-edge { stroke: var(--accent); stroke-width: 3; }

@media (max-width: 900px) {
  .tl-navbtn { display: inline-flex; }
  .tl-nav { position: absolute; z-index: 20; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); box-shadow: var(--shadow-l); transform: translateX(-102%); transition: transform 0.18s; }
  .pw-root.nav-open .tl-nav { transform: none; }
  .tl-body { position: relative; }
  .tl-main { padding: 14px 14px 80px; }
  .tl-facts { margin-left: 0; }
}
@media (max-width: 600px) {
  /* (on a phone the page's own title says where you are; the pill keeps its dot and the start of its text) */
  .tl-crumb { display: none; }
  .tl-py { min-width: 0; overflow: hidden; }
  .tl-py span:last-child { overflow: hidden; text-overflow: ellipsis; }
}

/* the help's tables: a long word (a path, a contig name) may break rather than widen the pane; the widest scroll sideways */
.help-page td, .help-page th { overflow-wrap: anywhere; }
/* a first column of names (gpxil render, a plane's name …) is not squeezed until its words break,
   where the help pane has room for it */
@media (min-width: 700px) {
  .help-page table td:first-child { min-width: 7.5em; }
}
/* (on a phone, room for a word such as gpxil2pxil, so that "gpxil encode" breaks at its space, not inside a word) */
@media (max-width: 699.98px) {
  .help-page table td:first-child { min-width: 5.5em; }
}
.help-xscroll { overflow-x: auto; }
/* the counts of gpxil stats (tools.js renderStats; the Viewer's counts) */
.tl-statshead { margin: 10px 0 6px; }
.tl-statsregions td, .tl-statsregions th { white-space: nowrap; }
.tl-statsregions td:not(:first-child), .tl-statsregions th:not(:first-child) { text-align: right; }
table.tl-stats caption { text-align: left; font-weight: 600; color: var(--ink); padding: 10px 0 4px; }
table.tl-stats th { text-align: left; vertical-align: top; white-space: nowrap; font-weight: 600; color: var(--ink-2); padding-right: 14px; }
/* gpxil compare (tools.js renderCompare): the first differences, and the picture with its key */
table.tl-cmpex td { white-space: nowrap; }
table.tl-cmpex caption { text-align: left; font-weight: 600; color: var(--ink); padding: 10px 0 4px; }
.tl-cmppic { margin: 12px 0 4px; }
.tl-cmpimg { overflow-x: auto; }
.tl-cmpimg img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--line); background: #fff; }
.tl-cmppic figcaption { margin: 6px 0 4px; color: var(--ink-2); font-size: 13px; }
.tl-cmpkey { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.tl-cmpkey li { display: inline-flex; align-items: center; gap: 6px; }
.tl-cmpsw { display: inline-flex; }
.tl-cmpsw i { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, 0.18); }
.tl-cmpsw i + i { border-left: 0; }
/* the palettes page: each palette's colours as swatches, which wrap on a phone */
.help-page dd.help-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 0.4em; }

/* ---------------- workflows (workflows.js): the Galaxy editor's boxes and wires (genomics.css, pipe.css) ---------------- */
.tl-wfbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.wf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; }
.wf-helpbtn { margin-left: 4px; }
.wf-going { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.wf-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.wf-card.bad { border-color: #f1c2bf; }
.wf-card-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; }
.wf-card-h b { font-size: 14.5px; }
.wf-card-h small { font-size: 12px; }
.wf-card p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.wf-card-p { font-size: 11.5px; color: var(--muted); word-break: break-all; }
.wf-card-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 4px; }
.wf-card-f .linkbtn { font-size: 12.5px; }
.wf-runs { margin: 0; }
.wf-runs td { vertical-align: middle; }
.wf-runs code { font-size: 12px; }
.wf-state { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f3; color: var(--ink-2); white-space: nowrap; }
.wf-state .ic { width: 13px; height: 13px; }
.wf-state.running { background: #fff6d6; color: #7a5800; }
.wf-state.running .ic { animation: wf-spin 1.1s linear infinite; }
@keyframes wf-spin { to { transform: rotate(360deg); } }
.wf-state.ok { background: var(--good-soft); color: var(--good); }
.wf-state.failed { background: var(--bad-soft); color: var(--bad); }
.wf-log td { vertical-align: middle; }
.wf-log code { font-size: 12px; }
.wf-extract { margin-top: 12px; }

/* the editor: the whole pane, the Tools tab's list of tools behind All tools */
.pw-root.wf-wide .tl-main { display: flex; flex-direction: column; padding: 10px 12px 10px; overflow: hidden; }
.pw-root.wf-wide .tl-main > * { max-width: none; }
.pw-root.wf-wide .tl-navbtn { display: inline-flex; }
.pw-root.wf-wide .tl-body { position: relative; overflow: hidden; }
.pw-root.wf-wide .tl-nav { position: absolute; z-index: 20; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); box-shadow: var(--shadow-l); transform: translateX(-102%); transition: transform 0.18s; }
.pw-root.wf-wide.nav-open .tl-nav { transform: none; }
.wf-ed { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-edbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wf-edbar .grow { flex: 1; }
.wf-edbar .btn .ic { width: 15px; height: 15px; }
.wf-name { width: auto; flex: 0 1 320px; min-width: 150px; padding: 4px 8px; font-weight: 600; }
.wf-iconly { padding-left: 0.5em; padding-right: 0.5em; }
.wf-about { font: 13.5px/1.45 var(--font); }
.wf-saved { font-size: 12px; color: var(--muted); min-width: 4.5em; }
.wf-hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.wf-dotkey { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5b6b82; vertical-align: -1px; }
.wf-edbody { flex: 1; min-height: 0; display: flex; gap: 12px; }
.wf-canvaswrap { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background-color: #f6f8fb; background-image: radial-gradient(#d7dde6 1px, transparent 1px); background-size: 16px 16px; }
.wf-canvas.gx-canvas { border: 0; border-radius: 0; background: none; overflow: visible; }
.wf-side { width: 310px; flex: none; overflow-y: auto; padding: 2px 2px 40px; }
.wf-side h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 6px; font-size: 15px; }
.wf-side h4 .tl-pkg { font-weight: 400; }
.wf-side h5 { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.wf-side .tl-field { margin-bottom: 10px; }
.wf-side .tl-input { max-width: 100%; }
.wf-side > .linkbtn { margin-top: 8px; }
.wf-toolhelp { margin: 2px 0 4px; font-size: 12.5px; }
.wf-remove { color: var(--bad); font-size: 12.5px; }
.wf-newinput { justify-self: start; font-size: 12.5px; }
.wf-source .tl-multilist li { font-size: 12.5px; }
.wf-where { margin-top: 12px; }
.wf-ready { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; color: var(--good); font-weight: 600; }
.wf-probs { margin: 4px 0 10px; padding-left: 18px; color: var(--act); font-size: 13px; line-height: 1.4; }
.wf-probs li { margin-bottom: 4px; }
.wf-probs li.link { cursor: pointer; }
.wf-probs li.link:hover { text-decoration: underline; }
/* the boxes */
.wf-canvas .gx-node { width: 236px; }
.wf-canvas .gx-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-canvas .gx-node.flag { border-color: var(--act); }
.wf-canvas .gx-node.flag .gx-node-t { background: var(--act-soft, #fff3e6); }
.wf-canvas .gx-node-t { gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.wf-canvas .gx-node-t span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wf-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.wf-node-sub { padding: 3px 9px 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-canvas .gx-ports { padding: 4px 0; }
.wf-canvas .gx-ports.out { padding-bottom: 6px; }
.wf-canvas .gx-port { font-size: 12.5px; min-height: 22px; }
.wf-canvas .gx-port span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-canvas .gx-port .dot { width: 13px; height: 13px; }
.wf-canvas .gx-port.out .dot { touch-action: none; }
/* (on a touch screen, a box is moved by its title, and the rest of it scrolls the canvas) */
.wf-canvas .gx-node-t { touch-action: none; }
.wf-plus { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--accent-2); cursor: pointer; }
.wf-plus:hover, .wf-plus:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.wf-plus .ic { width: 12px; height: 12px; }
.wf-modal { width: min(880px, 100%); }
.wf-modal .modal-b > p { margin: 0 0 8px; }
.wf-gh { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: 13px; color: var(--ink-2); }
.wf-gh .ic { width: 16px; height: 16px; color: var(--accent); }
.wf-chooser { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* a run */
.wf-plan { margin: 2px 0 0; padding-left: 24px; font-size: 13.5px; line-height: 1.45; }
.wf-plan li { margin: 3px 0; }
.wf-result { margin-top: 14px; display: grid; gap: 10px; }
.wf-result:empty { display: none; }
.wf-runhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.wf-runhead .grow { flex: 1; }
.wf-runhead .wf-state { font-size: 13px; padding: 2px 10px; }
.wf-folder { font-size: 12.5px; word-break: break-all; }
.wf-inputs { margin: 0; padding: 0 0 0 2px; list-style: none; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.wf-inputs code { font-size: 12px; word-break: break-all; }
.wf-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wf-step { border: 1px solid var(--line); border-left: 4px solid #c9ced6; border-radius: var(--radius-s); background: var(--panel); }
.wf-step.ok { border-left-color: var(--good); }
.wf-step.failed { border-left-color: var(--bad); }
.wf-step.running { border-left-color: #f0cf64; }
.wf-step-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 7px 10px; font-size: 14px; }
.wf-sum, .wf-status { font-size: 13px; color: var(--ink-2); }
.wf-step-b { padding: 0 10px 10px; display: grid; gap: 8px; }
.wf-step-b > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-2); }
.wf-step-b h5 { margin: 4px 0 0; font-size: 13px; }
.wf-step-b .tl-code { padding: 0; }
.wf-cmd { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-all; }

@media (max-width: 900px) {
  .wf-edbody { flex-direction: column; overflow-y: auto; }
  .wf-canvaswrap { flex: none; height: 56vh; }
  .wf-side { width: auto; overflow: visible; padding-bottom: 20px; }
  .pw-root.wf-wide .tl-main { overflow-y: auto; }
  .wf-ed { flex: none; min-height: 100%; }
  .wf-edbar .wf-shrink span { display: none; }
  .wf-name { flex: 1 1 160px; }
}
@media (max-width: 600px) {
  .wf-hint { display: none; }
}

/* ---------------- the Files tab: a pxil picture (editor.js, pxil-read.js) ---------------- */
.ed-pxil { padding: 4px 2px 24px; max-width: 900px; }
.ed-pxil h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 16px; overflow-wrap: anywhere; }
.ed-pxil-pic { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; max-width: 100%; overflow: auto; }
.ed-pxil-img { display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; max-width: none; }
.ed-pxil-at { margin: 6px 0 12px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.ed-pxil-seq { margin: 10px 0; padding: 10px 12px; max-height: 360px; overflow: auto; font: 12.5px/1.5 var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-s); white-space: pre; }