/* Flow Builder — Apple-style node canvas. Every rule is scoped to .fb (the screen),
   .main.fb-canvas (its background) or .sk-dlg .fb-* (fields inside the shared dialog),
   so other tabs keep their own tokens. Same finish as workflows-ui.css: system font,
   neutral fills, one system-blue accent; one quiet tint per node type. */

/* ---------- tokens ---------- */
.fb, .main.fb-canvas, .sk-dlg {
  --fb-bg:#F5F5F7; --fb-surface:#FFFFFF; --fb-raised:#FFFFFF;
  --fb-fill:rgba(120,120,128,.12); --fb-fill-2:rgba(120,120,128,.07);
  --fb-sep:rgba(60,60,67,.12); --fb-sep-strong:rgba(60,60,67,.22);
  --fb-text:#1D1D1F; --fb-text-2:#6E6E73; --fb-text-3:#8E8E93;
  --fb-accent:#0071E3; --fb-accent-hover:#0077ED; --fb-accent-text:#0066CC; --fb-accent-weak:rgba(0,113,227,.10);
  --fb-green:#248A3D; --fb-green-weak:rgba(52,199,89,.16);
  --fb-orange:#A84B00; --fb-orange-weak:rgba(255,149,0,.15);
  --fb-red:#D70015; --fb-red-weak:rgba(255,59,48,.10);
  --fb-dot:rgba(60,60,67,.16);
  --fb-wire:#AEAEB2; --fb-wire-yes:#34A853; --fb-wire-no:#E5484D;
  --t-goal:#0071E3; --t-goal-w:rgba(0,113,227,.12);
  --t-skill:#5E5CE6; --t-skill-w:rgba(94,92,230,.12);
  --t-condition:#C46A00; --t-condition-w:rgba(255,159,10,.16);
  --t-ask:#0A84A6; --t-ask-w:rgba(48,176,199,.15);
  --t-output:#248A3D; --t-output-w:rgba(52,199,89,.15);
  --t-note:#8A6D00; --t-note-w:rgba(255,214,10,.22); --t-note-bg:#FFF9DB;
  --t-conn:#6E6E73; --t-conn-w:rgba(120,120,128,.12);
  --fb-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
  --fb-shadow-hi:0 2px 6px rgba(0,0,0,.08), 0 14px 34px rgba(0,0,0,.12);
  --fb-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --fb-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fb, :root:not([data-theme="light"]) .main.fb-canvas, :root:not([data-theme="light"]) .sk-dlg {
    --fb-bg:#121214; --fb-surface:#1C1C1E; --fb-raised:#232326;
    --fb-fill:rgba(120,120,128,.24); --fb-fill-2:rgba(120,120,128,.13);
    --fb-sep:rgba(255,255,255,.08); --fb-sep-strong:rgba(255,255,255,.16);
    --fb-text:#F5F5F7; --fb-text-2:#A1A1A6; --fb-text-3:#7C7C82;
    --fb-accent:#0A84FF; --fb-accent-hover:#2891FF; --fb-accent-text:#4DA3FF; --fb-accent-weak:rgba(10,132,255,.18);
    --fb-green:#32D74B; --fb-green-weak:rgba(48,209,88,.16); --fb-orange:#FFB340; --fb-orange-weak:rgba(255,159,10,.16);
    --fb-red:#FF6961; --fb-red-weak:rgba(255,69,58,.16); --fb-dot:rgba(255,255,255,.10);
    --fb-wire:#636366; --fb-wire-yes:#30D158; --fb-wire-no:#FF6961;
    --t-goal:#4DA3FF; --t-goal-w:rgba(10,132,255,.20); --t-skill:#A5A4FF; --t-skill-w:rgba(94,92,230,.24);
    --t-condition:#FFB340; --t-condition-w:rgba(255,159,10,.20); --t-ask:#64D2FF; --t-ask-w:rgba(100,210,255,.16);
    --t-output:#32D74B; --t-output-w:rgba(48,209,88,.18); --t-note:#FFD60A; --t-note-w:rgba(255,214,10,.18); --t-note-bg:#3A3424;
    --t-conn:#A1A1A6; --t-conn-w:rgba(120,120,128,.24);
    --fb-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
    --fb-shadow-hi:0 0 0 1px rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] .fb, :root[data-theme="dark"] .main.fb-canvas, :root[data-theme="dark"] .sk-dlg {
  --fb-bg:#121214; --fb-surface:#1C1C1E; --fb-raised:#232326;
  --fb-fill:rgba(120,120,128,.24); --fb-fill-2:rgba(120,120,128,.13);
  --fb-sep:rgba(255,255,255,.08); --fb-sep-strong:rgba(255,255,255,.16);
  --fb-text:#F5F5F7; --fb-text-2:#A1A1A6; --fb-text-3:#7C7C82;
  --fb-accent:#0A84FF; --fb-accent-hover:#2891FF; --fb-accent-text:#4DA3FF; --fb-accent-weak:rgba(10,132,255,.18);
  --fb-green:#32D74B; --fb-green-weak:rgba(48,209,88,.16); --fb-orange:#FFB340; --fb-orange-weak:rgba(255,159,10,.16);
  --fb-red:#FF6961; --fb-red-weak:rgba(255,69,58,.16); --fb-dot:rgba(255,255,255,.10);
  --fb-wire:#636366; --fb-wire-yes:#30D158; --fb-wire-no:#FF6961;
  --t-goal:#4DA3FF; --t-goal-w:rgba(10,132,255,.20); --t-skill:#A5A4FF; --t-skill-w:rgba(94,92,230,.24);
  --t-condition:#FFB340; --t-condition-w:rgba(255,159,10,.20); --t-ask:#64D2FF; --t-ask-w:rgba(100,210,255,.16);
  --t-output:#32D74B; --t-output-w:rgba(48,209,88,.18); --t-note:#FFD60A; --t-note-w:rgba(255,214,10,.18); --t-note-bg:#3A3424;
  --t-conn:#A1A1A6; --t-conn-w:rgba(120,120,128,.24);
  --fb-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
  --fb-shadow-hi:0 0 0 1px rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}
.main.fb-canvas { background:var(--fb-bg); }
.main.fb-canvas .wrap:has(> .fb-editor) { padding:0; max-width:none; height:100%; }
.main.fb-canvas:has(.fb-editor) { overflow:hidden; }

/* ---------- base ---------- */
.fb, .fb * { box-sizing:border-box; }
.fb { font-family:var(--fb-sans); font-size:14px; line-height:1.45; letter-spacing:-.006em; color:var(--fb-text); -webkit-font-smoothing:antialiased; }
.fb h1, .fb h2, .fb h3, .fb p { margin:0; }
.fb ul, .fb ol { margin:0; padding:0; list-style:none; }
.fb button { font-family:inherit; color:inherit; cursor:pointer; letter-spacing:inherit; }
.fb button:disabled { cursor:not-allowed; opacity:.45; }
.fb :focus-visible { outline:3px solid color-mix(in srgb, var(--fb-accent) 45%, transparent); outline-offset:2px; border-radius:8px; }
.fb code { font-family:var(--fb-mono); font-size:.92em; background:var(--fb-fill-2); padding:1px 5px; border-radius:5px; }
.fb-ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fb-ic.sm { width:16px; height:16px; } .fb-ic.xs { width:13px; height:13px; stroke-width:2; }
.fb-spacer { flex:1; }
.fb-faint { color:var(--fb-text-2); }
.fb-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .fb-row.end { justify-content:flex-end; } .fb-row.gap { margin-top:18px; }
.para { margin:0 0 14px; font-size:13px; }

/* ---------- buttons, pills, chips ---------- */
.fb-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:980px; border:0; font-size:13.5px; font-weight:590; white-space:nowrap; transition:background .15s, box-shadow .15s; }
.fb-btn.sm { height:28px; padding:0 11px; font-size:12.5px; }
.fb-btn.fill { background:var(--fb-accent); color:#fff; }
.fb-btn.fill:hover:not(:disabled) { background:var(--fb-accent-hover); }
.fb-btn.outline { background:var(--fb-fill-2); color:var(--fb-accent-text); box-shadow:inset 0 0 0 1px var(--fb-sep); }
.fb-btn.outline:hover:not(:disabled) { background:var(--fb-fill); }
.fb-btn.danger { background:var(--fb-red-weak); color:var(--fb-red); }
.fb-iconbtn { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; border:0; background:transparent; color:var(--fb-text-2); }
.fb-iconbtn:hover:not(:disabled) { background:var(--fb-fill-2); color:var(--fb-text); }
.fb-pill { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:980px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.fb-pill.live { background:var(--fb-green-weak); color:var(--fb-green); }
.fb-pill.draft { background:var(--fb-orange-weak); color:var(--fb-orange); }
.fb-pill.muted { background:var(--fb-fill-2); color:var(--fb-text-2); }
.fb-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; height:24px; padding:0 9px; border-radius:7px; background:var(--fb-fill-2); color:var(--fb-text); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-chip.sm { height:20px; padding:0 7px; font-size:11.5px; border-radius:6px; }
.fb-chip.muted { color:var(--fb-text-2); }
.fb-chip button { display:inline-grid; place-items:center; width:16px; height:16px; margin-right:-4px; border:0; border-radius:50%; background:transparent; color:var(--fb-text-2); }
.fb-chip button:hover { background:var(--fb-fill); }
.fb-tile { display:inline-grid; place-items:center; width:26px; height:26px; flex:none; border-radius:8px; }
.fb-tile.lg { width:52px; height:52px; border-radius:15px; } .fb-tile.lg .fb-ic { width:26px; height:26px; }
.fb-tile.t-goal { background:var(--t-goal-w); color:var(--t-goal); } .fb-tile.t-skill { background:var(--t-skill-w); color:var(--t-skill); }
.fb-tile.t-condition { background:var(--t-condition-w); color:var(--t-condition); } .fb-tile.t-ask { background:var(--t-ask-w); color:var(--t-ask); }
.fb-tile.t-output { background:var(--t-output-w); color:var(--t-output); } .fb-tile.t-note { background:var(--t-note-w); color:var(--t-note); }
.fb-tile.t-conn { background:var(--t-conn-w); color:var(--t-conn); }
.fb-spin { width:16px; height:16px; border-radius:50%; border:2px solid var(--fb-fill); border-top-color:var(--fb-accent); animation:fbspin .8s linear infinite; }
@keyframes fbspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fb-spin { animation:none; } }

/* ---------- list + character pages ---------- */
.fb-page { max-width:1180px; margin:0 auto; padding:10px clamp(0px,1.6vw,20px) 64px; }
.fb-page-head { display:flex; align-items:flex-end; gap:12px; margin:14px 0 26px; flex-wrap:wrap; }
.fb-page-head h1 { font-size:34px; line-height:1.12; font-weight:700; letter-spacing:-.024em; }
.fb-page-head p { margin-top:8px; color:var(--fb-text-2); font-size:15px; max-width:660px; }
.fb-page-head .fb-iconbtn { align-self:flex-start; margin-top:4px; }
.fb-sub { font-size:13px; font-weight:600; color:var(--fb-text-2); text-transform:none; margin:34px 0 12px; } .fb-sub.tight { margin:0 0 10px; }
.fb-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.fb-card { display:flex; flex-direction:column; gap:10px; text-align:left; padding:18px 18px 14px; border:0; border-radius:18px; background:var(--fb-surface); box-shadow:var(--fb-shadow); transition:box-shadow .18s, transform .18s; min-width:0; }
.fb-card:hover { box-shadow:var(--fb-shadow-hi); transform:translateY(-1px); }
.fb-card-top { display:flex; align-items:center; gap:10px; }
.fb-card-name { font-size:17px; font-weight:650; letter-spacing:-.015em; }
.fb-card-pills, .fb-card-chips { display:flex; gap:6px; flex-wrap:wrap; }
.fb-card-desc { color:var(--fb-text-2); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fb-card-foot { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; border-top:1px solid var(--fb-sep); color:var(--fb-text-2); font-size:12px; }
.fb-card-foot span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-empty-card { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:48px 20px; border-radius:18px; background:var(--fb-surface); box-shadow:var(--fb-shadow); color:var(--fb-text-2); text-align:center; }
.fb-empty-card.small { padding:22px 16px; font-size:13px; }
.fb-empty-card.err { color:var(--fb-red); }
.fb-sheet { background:var(--fb-surface); border-radius:18px; box-shadow:var(--fb-shadow); padding:18px; margin-bottom:16px; display:grid; gap:12px; }
.fb-dirty { font-size:12px; color:var(--fb-orange); font-weight:600; }
.fb-vlist { display:grid; gap:2px; }
.fb-vlist li { display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--fb-sep); font-size:13px; }
.fb-vlist li:last-child { border-bottom:0; }
.fb-vno { font-weight:700; min-width:34px; font-variant-numeric:tabular-nums; }

/* ---------- inputs ---------- */
.fb-field { display:grid; gap:6px; margin-bottom:16px; }
.fb-label { font-size:12px; font-weight:600; color:var(--fb-text-2); }
.fb-hint { font-size:12px; color:var(--fb-text-2); line-height:1.4; }
.fb-input, .fb-textarea { width:100%; border:0; border-radius:10px; background:var(--fb-fill-2); box-shadow:inset 0 0 0 1px var(--fb-sep); color:var(--fb-text); font:inherit; font-size:14px; padding:9px 11px; }
.fb-input { height:36px; padding:0 11px; }
select.fb-input { appearance:auto; }
.fb-textarea { resize:vertical; line-height:1.5; min-height:64px; }
.fb-textarea.big { min-height:380px; font-size:14px; }
.fb-input:focus, .fb-textarea:focus { outline:none; box-shadow:inset 0 0 0 1px var(--fb-accent), 0 0 0 3px var(--fb-accent-weak); background:var(--fb-surface); }
.fb-tags { display:flex; flex-wrap:wrap; gap:6px; padding:6px; border-radius:10px; background:var(--fb-fill-2); box-shadow:inset 0 0 0 1px var(--fb-sep); }
.fb-tag-in { flex:1; min-width:120px; height:26px; border:0; background:transparent; color:var(--fb-text); font:inherit; font-size:13.5px; outline:none; padding:0 4px; }
.fb-brief-box { margin:0 -8px 16px; padding:12px 8px 2px; border-radius:12px; background:var(--t-skill-w); }
.fb-brief-box .fb-label { color:var(--t-skill); font-size:12.5px; }
.fb-brief-box .fb-textarea { background:var(--fb-surface); min-height:150px; }
.fb-choices { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fb-choice { display:grid; gap:1px; text-align:left; padding:9px 10px; border:0; border-radius:10px; background:var(--fb-fill-2); box-shadow:inset 0 0 0 1px var(--fb-sep); font-size:13px; }
.fb-choice span { font-size:11.5px; color:var(--fb-text-2); }
.fb-choice.on { background:var(--t-condition-w); box-shadow:inset 0 0 0 1.5px var(--t-condition); }
.fb-choice.on b { color:var(--t-condition); }
.fb-choice.wide { grid-column:1 / -1; }

/* ---------- editor layout ---------- */
.fb-editor { display:grid; grid-template-rows:auto 1fr; height:calc(100vh - 56px); min-height:520px; }
.fb-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--fb-surface); border-bottom:1px solid var(--fb-sep); min-width:0; flex-wrap:wrap; }
.fb-name { font:inherit; font-size:17px; font-weight:650; letter-spacing:-.015em; color:var(--fb-text); border:0; background:transparent; border-radius:8px; padding:4px 8px; width:min(280px, 40vw); }
.fb-name:hover { background:var(--fb-fill-2); } .fb-name:focus { outline:none; background:var(--fb-fill-2); box-shadow:0 0 0 3px var(--fb-accent-weak); }
.fb-bar-pills { display:flex; gap:6px; }
.fb-issues { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border:0; border-radius:980px; font-size:12.5px; font-weight:600; }
.fb-issues.bad { background:var(--fb-red-weak); color:var(--fb-red); } .fb-issues.good { background:var(--fb-green-weak); color:var(--fb-green); }
.fb-body { display:grid; grid-template-columns:1fr 360px; min-height:0; }
.fb-stage { position:relative; overflow:hidden; background-color:var(--fb-bg); background-image:radial-gradient(var(--fb-dot) 1.1px, transparent 1.3px); background-size:20px 20px; touch-action:none; cursor:default; outline:none; user-select:none; -webkit-user-select:none; }
.fb-stage.panning { cursor:grabbing; } .fb-stage.wiring { cursor:crosshair; }
.fb-world { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.fb-wires { position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.fb-wire { fill:none; stroke:var(--fb-wire); stroke-width:2; stroke-linecap:round; }
.fb-wire.p-yes { stroke:var(--fb-wire-yes); } .fb-wire.p-no { stroke:var(--fb-wire-no); }
.fb-wire.sel { stroke:var(--fb-accent); stroke-width:3; }
.fb-wire.temp { stroke:var(--fb-accent); stroke-dasharray:6 6; }
.fb-wire-hit { fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:pointer; }
.fb-wire-end { fill:var(--fb-wire); } .fb-wire-end.p-yes { fill:var(--fb-wire-yes); } .fb-wire-end.p-no { fill:var(--fb-wire-no); } .fb-wire-end.sel { fill:var(--fb-accent); }

/* ---------- nodes ---------- */
.fb-node { position:absolute; left:0; top:0; width:248px; padding:12px 14px 13px; border-radius:16px; background:var(--fb-raised); box-shadow:var(--fb-shadow); cursor:grab; transition:box-shadow .15s; }
.fb-node:hover { box-shadow:var(--fb-shadow-hi); }
.fb-node.dragging { cursor:grabbing; box-shadow:var(--fb-shadow-hi); z-index:3; }
.fb-node.sel { box-shadow:0 0 0 2px var(--fb-accent), var(--fb-shadow-hi); z-index:2; }
.fb-node.bad:not(.sel) { box-shadow:0 0 0 1.5px color-mix(in srgb, var(--fb-red) 55%, transparent), var(--fb-shadow); }
.fb-node.drop-ok { box-shadow:0 0 0 3px var(--fb-green), var(--fb-shadow-hi); }
.fb-node.drop-no { box-shadow:0 0 0 3px var(--fb-red), var(--fb-shadow); }
.fb-node.t-note { background:var(--t-note-bg); width:220px; }
.fb-n-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fb-n-head .fb-tile { width:22px; height:22px; border-radius:7px; }
.fb-n-kind { font-size:11.5px; font-weight:600; color:var(--fb-text-2); letter-spacing:.01em; }
.fb-n-flag { margin-left:auto; color:var(--fb-red); display:inline-flex; } .fb-n-flag.warn { color:var(--fb-orange); }
.fb-n-title { font-size:15px; font-weight:650; letter-spacing:-.012em; line-height:1.25; margin-bottom:4px; overflow-wrap:anywhere; }
.fb-n-title.q { font-size:14px; font-weight:600; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fb-n-sub { font-size:12.5px; color:var(--fb-text-2); line-height:1.4; margin-top:4px; overflow-wrap:anywhere; }
.fb-n-sub b { color:var(--fb-text); font-weight:600; }
.fb-n-brief { font-size:12.5px; line-height:1.45; color:var(--fb-text); background:var(--fb-fill-2); border-radius:9px; padding:7px 9px; margin-top:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.fb-node.t-skill .fb-n-brief { background:var(--t-skill-w); }
.fb-n-note { font-size:13px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
.muted { color:var(--fb-text-3) !important; }
.fb-n-chips { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.fb-n-branch { position:relative; display:flex; align-items:center; justify-content:flex-end; height:26px; margin:6px -14px 0 0; padding-right:22px; font-size:12px; font-weight:600; }
.fb-n-branch.yes { color:var(--fb-wire-yes); } .fb-n-branch.no { color:var(--fb-wire-no); margin-top:2px; }
.fb-n-branch .fb-port { position:absolute; right:-7px; top:50%; margin-top:-7px; }
.fb-port { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--fb-raised); box-shadow:0 0 0 2px var(--fb-wire); z-index:1; }
.fb-port.in { left:-7px; top:50%; margin-top:-7px; }
.fb-port.out { right:-7px; top:50%; margin-top:-7px; cursor:crosshair; }
.fb-port.out:hover, .fb-port.out:active { box-shadow:0 0 0 2px var(--fb-accent); background:var(--fb-accent); }
.fb-port.out.yes { box-shadow:0 0 0 2px var(--fb-wire-yes); } .fb-port.out.no { box-shadow:0 0 0 2px var(--fb-wire-no); }
.fb-port.out::after { content:""; position:absolute; inset:-9px; border-radius:50%; }

/* ---------- palette + zoom ---------- */
.fb-palette { position:absolute; left:14px; top:14px; display:grid; gap:2px; padding:8px; border-radius:16px; background:color-mix(in srgb, var(--fb-surface) 94%, transparent); box-shadow:var(--fb-shadow); z-index:5; }
.fb-pal-h { font-size:11px; font-weight:600; color:var(--fb-text-3); padding:2px 8px 6px; }
.fb-pal-item { display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border:0; border-radius:10px; background:transparent; font-size:13px; font-weight:550; text-align:left; cursor:grab; }
.fb-pal-item:hover { background:var(--fb-fill-2); }
.fb-zoom { position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:2px; padding:4px; border-radius:12px; background:var(--fb-surface); box-shadow:var(--fb-shadow); z-index:5; }
.fb-zoom-v { min-width:52px; height:32px; border:0; background:transparent; font-size:12.5px; font-weight:600; color:var(--fb-text-2); font-variant-numeric:tabular-nums; border-radius:8px; }
.fb-zoom-v:hover { background:var(--fb-fill-2); }
.fb-empty { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:4; }
.fb-empty[hidden] { display:none; }
.fb-empty-in { pointer-events:auto; display:grid; justify-items:center; gap:12px; max-width:380px; padding:30px 28px; text-align:center; border-radius:22px; background:var(--fb-surface); box-shadow:var(--fb-shadow-hi); }
.fb-empty-in h3 { font-size:19px; font-weight:650; letter-spacing:-.015em; }
.fb-empty-in p { color:var(--fb-text-2); font-size:13.5px; }

/* ---------- side panel ---------- */
.fb-panel { background:var(--fb-surface); border-left:1px solid var(--fb-sep); display:grid; grid-template-rows:auto 1fr; min-height:0; }
.fb-seg { display:flex; gap:2px; margin:12px 12px 0; padding:2px; border-radius:10px; background:var(--fb-fill-2); }
.fb-seg button { flex:1; height:28px; border:0; border-radius:8px; background:transparent; font-size:12.5px; font-weight:550; color:var(--fb-text-2); white-space:nowrap; }
.fb-seg button.on { background:var(--fb-raised); color:var(--fb-text); box-shadow:0 1px 3px rgba(0,0,0,.10); }
.fb-seg .c { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--fb-red); color:#fff; font-size:10.5px; margin-left:2px; }
.fb-panel-body { overflow-y:auto; padding:16px 16px 28px; min-height:0; }
.fb-ins-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; }
.fb-ins-head b { display:block; font-size:15px; font-weight:650; }
.fb-ins-head .fb-faint { font-size:12.5px; }
.fb-node-issues { display:grid; gap:4px; margin:-6px 0 14px; }
.fb-node-issues li, .fb-issue-list li { display:flex; gap:6px; align-items:flex-start; font-size:12.5px; }
.fb-node-issues .bad, .fb-issue-list .bad button { color:var(--fb-red); } .fb-node-issues .warn, .fb-issue-list .warn button { color:var(--fb-orange); }
.fb-issue-list { display:grid; gap:2px; margin-bottom:16px; }
.fb-issue-list button { display:flex; gap:7px; align-items:flex-start; width:100%; text-align:left; border:0; background:transparent; padding:7px 8px; border-radius:9px; font-size:13px; }
.fb-issue-list button:hover:not(:disabled) { background:var(--fb-fill-2); }
.fb-issue-list button:disabled { opacity:1; cursor:default; }
.fb-issue-list .fb-ic { margin-top:2px; }
.fb-h3 { font-size:12px; font-weight:600; color:var(--fb-text-2); margin:0 0 6px; }
.fb-ok { display:flex; gap:10px; align-items:center; padding:14px; border-radius:12px; background:var(--fb-green-weak); color:var(--fb-green); }
.fb-ok b { display:block; color:var(--fb-text); } .fb-ok .fb-faint { font-size:12.5px; }
.fb-stats { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.fb-stat { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border-radius:980px; background:var(--fb-fill-2); font-size:12.5px; }
.fb-stat .fb-tile { width:20px; height:20px; border-radius:50%; }
.fb-tips { padding:14px; border-radius:12px; background:var(--fb-fill-2); font-size:13px; }
.fb-tips ul { list-style:disc; padding-left:18px; margin-top:6px; display:grid; gap:4px; color:var(--fb-text-2); }
.fb-tips b { color:var(--fb-text); }
.fb-ai-goal { padding:12px; border-radius:12px; background:var(--t-goal-w); margin-bottom:12px; font-size:13px; }
.fb-ai-steps { display:grid; gap:8px; }
.fb-ai-step { display:flex; gap:10px; padding:10px; border-radius:12px; background:var(--fb-fill-2); font-size:13px; }
.fb-ai-n { display:inline-grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; background:var(--fb-surface); font-size:11.5px; font-weight:700; box-shadow:inset 0 0 0 1px var(--fb-sep); }
.fb-ai-k { font-size:12px; color:var(--fb-text-2); }
.fb-ai-k b { color:var(--fb-text); }
.fb-ai-step blockquote { margin:6px 0 0; padding:6px 9px; border-radius:8px; background:var(--fb-surface); font-size:12.5px; white-space:pre-wrap; overflow-wrap:anywhere; }
.fb-ai-step.k-skill blockquote { background:var(--t-skill-w); }
.fb-ai-links { margin-top:6px; font-size:12px; color:var(--fb-text-2); }
.fb-ref { display:inline-block; padding:0 6px; border-radius:6px; background:var(--fb-surface); font-weight:600; color:var(--fb-text); font-variant-numeric:tabular-nums; }
.fb-raw { margin-top:14px; font-size:12.5px; }
.fb-raw summary { cursor:pointer; color:var(--fb-accent-text); font-weight:600; }
.fb-raw pre { margin:8px 0 0; padding:10px; border-radius:10px; background:var(--fb-fill-2); font-family:var(--fb-mono); font-size:11.5px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto; }

/* fields inside the shared confirm dialog */
.sk-dlg .fb-field { display:grid; gap:6px; margin-top:12px; }
.sk-dlg .fb-label { font-size:12px; font-weight:600; color:var(--fb-text-2); }
.sk-dlg .fb-input { width:100%; height:36px; border:0; border-radius:10px; padding:0 11px; font:inherit; background:var(--fb-fill-2); box-shadow:inset 0 0 0 1px var(--fb-sep); color:var(--fb-text); }
.sk-dlg .fb-faint { color:var(--fb-text-2); font-size:12.5px; margin-top:6px; }

/* ---------- small screens: canvas on top, panel as a sheet below ---------- */
@media (max-width: 980px) {
  .fb-body { grid-template-columns:1fr; grid-template-rows:1fr minmax(240px, 42%); }
  .fb-panel { border-left:0; border-top:1px solid var(--fb-sep); }
  .fb-palette { top:auto; bottom:62px; left:10px; grid-auto-flow:column; padding:6px; }
  .fb-pal-h { display:none; }
  .fb-pal-item span:last-child { display:none; }
  .fb-pal-item { padding:6px; }
  .fb-name { width:min(200px, 50vw); }
  .fb-page-head h1 { font-size:28px; }
}

/* Requests without a flow (list screen) */
.fb-un-sheet { margin-top:24px; }
.fb-un-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fb-un { width:100%; border-collapse:collapse; font-size:13px; }
.fb-un th { text-align:left; font-weight:600; color:var(--fb-text-2); padding:8px 10px; border-bottom:1px solid var(--fb-sep-strong); white-space:nowrap; }
.fb-un td { padding:10px; border-bottom:1px solid var(--fb-sep); vertical-align:top; }
.fb-un td.num { text-align:right; font-variant-numeric:tabular-nums; }
.fb-un-req { display:block; max-width:520px; overflow-wrap:anywhere; }
.fb-un tr.fixed td { color:var(--fb-text-2); }
.fb-un-note { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--fb-text-2); }
.fb-un-act { white-space:nowrap; }
.fb-un-act .fb-pill { margin-right:6px; }

/* Skill tasks (20261021090000): a Skill node that runs a fixed task of its skill. */
.fb-n-task { display:flex; align-items:center; gap:6px; margin-top:6px; padding:4px 8px; border-radius:8px; background:var(--t-skill-w); color:var(--t-skill); font-size:12px; font-weight:600; overflow:hidden; }
.fb-n-task span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-task-box { margin:0 0 16px; padding:12px; border-radius:12px; border:1px solid var(--fb-sep-strong); background:var(--fb-fill-2); }
.fb-task-h { display:flex; align-items:center; gap:6px; margin-bottom:6px; color:var(--t-skill); }
.fb-task-h b { color:var(--fb-text); }
.fb-task-box .fb-label { display:block; margin:10px 0 6px; }
.fb-task-inputs .fb-field { margin-bottom:10px; }
.fb-ro { margin:0; padding:8px 10px; max-height:220px; overflow:auto; border-radius:9px; background:var(--fb-surface); font-family:var(--fb-sans); font-size:12.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--fb-text); }
.fb-refs { display:grid; gap:4px; margin:0 0 8px; padding:0; list-style:none; }
.fb-refs li { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; }
.fb-refs li code { overflow-wrap:anywhere; }
.fb-refs li.off { opacity:.45; }
.fb-refs li.bad code, .fb-chip.bad { color:var(--fb-red); }
.fb-refs.sm { margin-top:6px; }