/* Workflows screen — the owner-approved Apple-style mockup (workflow-controller-apple),
   carried into the Control Room. Every rule is scoped to .wf (the page), .main.wf-canvas
   (its background) or the dialog body classes (.sk-dlg .wf-dlg-*) so the other tabs keep
   the console's own tokens and element styles. Same finish as skills-ui.css: system font,
   neutral fills, one system-blue accent, green only for "live", orange only for "waiting". */

/* ---------- tokens ---------- */
.wf, .main.wf-canvas {
  --wf-bg:#F5F5F7; --wf-surface:#FFFFFF;
  --wf-fill:rgba(120,120,128,.12); --wf-fill-2:rgba(120,120,128,.07); --wf-fill-3:rgba(120,120,128,.20);
  --wf-sep:rgba(60,60,67,.12); --wf-sep-strong:rgba(60,60,67,.24);
  --wf-text:#1D1D1F; --wf-text-2:#6E6E73; --wf-text-3:#8E8E93;
  --wf-accent:#0071E3; --wf-accent-hover:#0077ED; --wf-accent-text:#0066CC; --wf-accent-weak:rgba(0,113,227,.10); --wf-accent-ink:#FFFFFF;
  --wf-green:#1D7A34; --wf-green-weak:rgba(52,199,89,.16); --wf-switch:#34C759;
  --wf-orange:#A84B00; --wf-orange-weak:rgba(255,149,0,.16);
  --wf-red:#D70015; --wf-red-weak:rgba(255,59,48,.10);
  --wf-backdrop:rgba(20,20,24,.24); --wf-seg-on:#FFFFFF;
  --wf-shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 0 1px rgba(0,0,0,.04);
  --wf-shadow-lg:0 24px 70px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.06);
  --wf-r-card:18px; --wf-r-ctl:10px;
  --wf-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --wf-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wf, :root:not([data-theme="light"]) .main.wf-canvas {
    --wf-bg:#141416; --wf-surface:#1E1E21;
    --wf-fill:rgba(120,120,128,.26); --wf-fill-2:rgba(120,120,128,.14); --wf-fill-3:rgba(120,120,128,.36);
    --wf-sep:rgba(255,255,255,.08); --wf-sep-strong:rgba(255,255,255,.17);
    --wf-text:#F5F5F7; --wf-text-2:#A1A1A6; --wf-text-3:#7C7C82;
    --wf-accent:#0A84FF; --wf-accent-hover:#2891FF; --wf-accent-text:#4DA3FF; --wf-accent-weak:rgba(10,132,255,.18);
    --wf-green:#34D058; --wf-green-weak:rgba(48,209,88,.15); --wf-switch:#30D158;
    --wf-orange:#FFB340; --wf-orange-weak:rgba(255,159,10,.16);
    --wf-red:#FF6961; --wf-red-weak:rgba(255,69,58,.16);
    --wf-backdrop:rgba(0,0,0,.5); --wf-seg-on:#636366;
    --wf-shadow-sm:0 0 0 1px rgba(255,255,255,.04);
    --wf-shadow-lg:0 0 0 1px rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] .wf, :root[data-theme="dark"] .main.wf-canvas {
  --wf-bg:#141416; --wf-surface:#1E1E21;
  --wf-fill:rgba(120,120,128,.26); --wf-fill-2:rgba(120,120,128,.14); --wf-fill-3:rgba(120,120,128,.36);
  --wf-sep:rgba(255,255,255,.08); --wf-sep-strong:rgba(255,255,255,.17);
  --wf-text:#F5F5F7; --wf-text-2:#A1A1A6; --wf-text-3:#7C7C82;
  --wf-accent:#0A84FF; --wf-accent-hover:#2891FF; --wf-accent-text:#4DA3FF; --wf-accent-weak:rgba(10,132,255,.18);
  --wf-green:#34D058; --wf-green-weak:rgba(48,209,88,.15); --wf-switch:#30D158;
  --wf-orange:#FFB340; --wf-orange-weak:rgba(255,159,10,.16);
  --wf-red:#FF6961; --wf-red-weak:rgba(255,69,58,.16);
  --wf-backdrop:rgba(0,0,0,.5); --wf-seg-on:#636366;
  --wf-shadow-sm:0 0 0 1px rgba(255,255,255,.04);
  --wf-shadow-lg:0 0 0 1px rgba(255,255,255,.07), 0 30px 80px rgba(0,0,0,.6);
  color-scheme:dark;
}
.main.wf-canvas { background:var(--wf-bg); }

/* ---------- base ---------- */
.wf, .wf * { box-sizing:border-box; }
.wf { font-family:var(--wf-sans); font-size:14px; line-height:1.45; letter-spacing:-.006em; color:var(--wf-text); -webkit-font-smoothing:antialiased; }
.wf-page { max-width:1240px; margin:0 auto; padding:10px clamp(0px,1.6vw,20px) 64px; min-width:0; }
.wf h1, .wf h2, .wf h3 { margin:0; text-wrap:balance; }
.wf p { margin:0; text-wrap:pretty; }
.wf ul, .wf ol { margin:0; padding:0; list-style:none; }
.wf button { font-family:inherit; cursor:pointer; letter-spacing:inherit; color:inherit; }
.wf button:disabled { cursor:not-allowed; }
.wf :focus-visible { outline:3px solid color-mix(in srgb, var(--wf-accent) 45%, transparent); outline-offset:2px; border-radius:8px; }
.wf-ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wf-ic.sm { width:15px; height:15px; } .wf-ic.xs { width:13px; height:13px; stroke-width:2; }
.wf-spacer { flex:1; }
.wf-faint { color:var(--wf-text-2); font-weight:400; }
.wf-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wf-row { display:flex; align-items:center; gap:10px; }
/* the console's global .num is monospaced; this screen keeps the system font */
.wf .num { font-family:inherit; }
.wf mark { background:var(--wf-accent-weak); color:var(--wf-accent-text); padding:0 3px; border-radius:4px; font-weight:600; }

/* ---------- page heads ---------- */
.wf-page-head { display:flex; align-items:flex-end; gap:16px; margin:14px 0 26px; flex-wrap:wrap; }
.wf-page-head h1 { font-size:34px; line-height:1.12; font-weight:700; letter-spacing:-.024em; }
.wf-page-head p { margin-top:8px; color:var(--wf-text-2); font-size:15px; max-width:640px; }
.wf-head-acts { display:flex; gap:8px; flex-wrap:wrap; }
.wf-sec-head { display:flex; align-items:baseline; gap:12px; margin:0 4px 10px; flex-wrap:wrap; }
.wf-sec-head h2 { font-size:19px; font-weight:600; letter-spacing:-.016em; }
.wf-sec-head .hint { font-size:13px; color:var(--wf-text-2); }

/* ---------- surfaces ---------- */
.wf-card { background:var(--wf-surface); border-radius:var(--wf-r-card); box-shadow:var(--wf-shadow-sm); min-width:0; overflow:hidden; }
.wf-card + .wf-card { margin-top:22px; }
.wf-card-head { display:flex; align-items:baseline; gap:10px; padding:18px 20px 6px; flex-wrap:wrap; }
.wf-card-head h2 { font-size:17px; font-weight:600; letter-spacing:-.014em; }
.wf-card-head .hint { font-size:13px; color:var(--wf-text-2); }
.wf-card-body { padding:14px 20px 20px; }
.wf-card-foot { padding:8px 20px 16px; font-size:13px; }
.wf-empty { padding:36px 20px; text-align:center; color:var(--wf-text-2); display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.wf-empty.wf-err { color:var(--wf-red); }
.wf-spin { width:16px; height:16px; border-radius:50%; border:2px solid var(--wf-fill-3); border-top-color:var(--wf-accent); animation:wf-spin .8s linear infinite; }
@keyframes wf-spin { to { transform:rotate(360deg); } }

/* pills */
.wf-pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:2px 9px; border-radius:999px; white-space:nowrap; letter-spacing:0; line-height:1.5; }
.wf-pill.live { color:var(--wf-green); background:var(--wf-green-weak); }
.wf-pill.draft { color:var(--wf-orange); background:var(--wf-orange-weak); }
.wf-pill.muted { color:var(--wf-text-2); background:var(--wf-fill); }
.wf-cat { font-size:12px; color:var(--wf-text-2); background:var(--wf-fill); padding:1px 8px; border-radius:999px; font-weight:500; white-space:nowrap; }
.wf-skey { font-family:var(--wf-mono); font-size:11.5px; color:var(--wf-text-3); }
.wf-skey.big { font-size:13px; color:var(--wf-text); font-weight:600; }

/* buttons */
.wf-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; background:var(--wf-fill); color:var(--wf-text); font-weight:500; font-size:13.5px; padding:0 14px; min-height:32px; border-radius:var(--wf-r-ctl); transition:transform .12s ease, background-color .15s ease, opacity .15s ease; white-space:nowrap; }
.wf .wf-btn { color:var(--wf-text); }
.wf-btn:hover:not(:disabled) { background:var(--wf-fill-3); }
.wf-btn:active:not(:disabled) { transform:scale(.97); }
.wf .wf-btn.primary { background:var(--wf-accent); color:var(--wf-accent-ink); }
.wf-btn.primary:hover:not(:disabled) { background:var(--wf-accent-hover); }
.wf .wf-btn.ghost { background:transparent; color:var(--wf-accent-text); padding:0 8px; }
.wf-btn.ghost:hover:not(:disabled) { background:var(--wf-accent-weak); }
.wf .wf-btn.danger { color:var(--wf-red); }
.wf-btn.danger:hover:not(:disabled) { background:var(--wf-red-weak); }
.wf-btn.sm { min-height:28px; font-size:13px; padding:0 11px; border-radius:8px; }
.wf-btn.ghost.sm { padding:0 7px; }
.wf-btn:disabled { opacity:.4; }
.wf-btn .wf-ic { width:15px; height:15px; stroke-width:2; }
.wf-iconbtn, .wf-xbtn { width:30px; height:30px; border-radius:50%; border:0; background:transparent; color:var(--wf-text-3); display:grid; place-items:center; flex:none; padding:0; }
.wf-iconbtn:hover { background:var(--wf-red-weak); color:var(--wf-red); }
.wf-iconbtn .wf-ic, .wf-xbtn .wf-ic { width:14px; height:14px; stroke-width:2.2; }
.wf-xbtn { background:var(--wf-fill); color:var(--wf-text-2); }
.wf-xbtn:hover { background:var(--wf-fill-3); color:var(--wf-text); }

/* form controls */
.wf select, .wf textarea, .wf input[type=text], .wf input[type=search], .wf input[type=number] { width:100%; font-family:inherit; font-size:14px; color:var(--wf-text); background:var(--wf-surface); border:.5px solid var(--wf-sep-strong); border-radius:var(--wf-r-ctl); padding:8px 11px; box-shadow:0 .5px 1px rgba(0,0,0,.04); transition:box-shadow .15s ease, border-color .15s ease; margin:0; }
.wf select { appearance:none; -webkit-appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; background-size:14px; }
.wf select:focus, .wf textarea:focus, .wf input[type=text]:focus, .wf input[type=search]:focus, .wf input[type=number]:focus { outline:none; border-color:var(--wf-accent); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--wf-accent) 28%, transparent); }
.wf textarea { resize:vertical; min-height:64px; line-height:1.5; }
.wf ::placeholder { color:var(--wf-text-3); }
.wf-field { margin-bottom:22px; }
.wf-field.last { margin-bottom:0; }
.wf-field > label, .wf-flabel { display:block; font-size:13px; color:var(--wf-text); font-weight:600; margin-bottom:4px; }
.wf-field .help, .wf .help { font-size:13px; color:var(--wf-text-2); margin:0 0 9px; }
.wf-field.bad .wf-chips { box-shadow:0 0 0 1.5px var(--wf-red); border-radius:12px; padding:6px; }

/* segmented control */
.wf-seg { display:inline-flex; gap:2px; padding:2px; background:var(--wf-fill); border-radius:10px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.wf-seg::-webkit-scrollbar { display:none; }
.wf-seg button { border:0; background:transparent; color:var(--wf-text); font-size:13px; font-weight:500; padding:5px 14px; border-radius:8px; white-space:nowrap; display:inline-flex; gap:7px; align-items:center; transition:background-color .2s ease, box-shadow .2s ease; }
.wf-seg button:hover:not(.on) { background:var(--wf-fill-2); }
.wf-seg button.on { background:var(--wf-seg-on); box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight:600; }
.wf-seg .c { font-size:12px; color:var(--wf-text-2); font-weight:500; font-variant-numeric:tabular-nums; }
.wf-seg .c.attn { color:var(--wf-orange); background:var(--wf-orange-weak); padding:0 7px; border-radius:999px; }
.wf-tabs-row { margin-bottom:24px; }

/* iOS switch */
.wf-switch { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--wf-text-2); border:0; background:transparent; padding:2px 0; white-space:nowrap; text-align:left; }
.wf .wf-switch { color:var(--wf-text-2); }
.wf-switch .tr { width:38px; height:23px; border-radius:999px; background:var(--wf-fill-3); position:relative; transition:background-color .25s ease; flex:none; order:2; }
.wf-switch .tr::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.12); transition:transform .28s cubic-bezier(.32,.72,0,1); }
.wf-switch[aria-checked="true"] .tr { background:var(--wf-switch); }
.wf-switch[aria-checked="true"] .tr::after { transform:translateX(15px); }
.wf .wf-switch[aria-checked="true"] { color:var(--wf-text); }

/* ---------- list page ---------- */
.wf-controller { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; padding:20px 24px; margin-bottom:30px; background:var(--wf-surface); border-radius:var(--wf-r-card); box-shadow:var(--wf-shadow-sm); }
.wf-controller h2 { font-size:15px; font-weight:600; }
.wf-ctl-flow { display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin-top:12px; font-size:13.5px; }
.wf-ctl-flow .n { display:inline-flex; align-items:center; gap:8px; }
.wf-ctl-flow .n i { font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--wf-accent-weak); color:var(--wf-accent-text); font-size:12px; font-weight:600; flex:none; }
.wf-ctl-flow .n.alt { color:var(--wf-text-2); }
.wf-ctl-flow .n.alt i { background:var(--wf-fill); color:var(--wf-text-2); }
.wf-ctl-flow .arr { color:var(--wf-text-3); display:inline-flex; }
.wf-mode { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:.5px solid var(--wf-sep); }
.wf-mode-l { font-size:13px; font-weight:600; }
.wf-mode-d { font-size:13px; color:var(--wf-text-2); flex:1 1 260px; }
.wf-ctl-numbers { display:flex; }
.wf-ctl-numbers > div { padding:0 22px; border-left:.5px solid var(--wf-sep-strong); }
.wf-ctl-numbers > div:first-child { border-left:0; }
.wf-ctl-numbers b { display:block; font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.wf-ctl-numbers .orange b { color:var(--wf-orange); }
.wf-ctl-numbers span { font-size:12.5px; color:var(--wf-text-2); }
.wf-ctl-err { font-size:13px; color:var(--wf-red); max-width:240px; }

.wf-table { width:100%; border-collapse:collapse; font-size:14px; }
.wf-table th { text-align:left; font-size:12px; color:var(--wf-text-2); font-weight:500; padding:14px 20px 8px; border-bottom:.5px solid var(--wf-sep); white-space:nowrap; text-transform:none; letter-spacing:0; background:none; }
.wf-table th.num, .wf-table td.num { text-align:right; }
.wf-table td { padding:15px 20px; border-bottom:.5px solid var(--wf-sep); vertical-align:middle; }
.wf-table tr:last-child td { border-bottom:0; }
.wf-table tbody tr.row { cursor:pointer; transition:background-color .12s ease; }
.wf-table tbody tr.row:hover { background:var(--wf-fill-2); }
.wf-table td.num { font-variant-numeric:tabular-nums; }
.wf-table td.chev { width:36px; padding-left:0; color:var(--wf-text-3); }
.wf-name { font-weight:600; font-size:15px; letter-spacing:-.01em; }
.wf-goal { font-size:13.5px; color:var(--wf-text-2); margin-top:3px; max-width:480px; }
.wf-types { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.wf-sub { display:block; font-size:12.5px; margin-top:2px; }
.wf-status { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }

.wf-acard { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:18px 20px; position:relative; }
.wf-acard + .wf-acard::before { content:""; position:absolute; top:0; left:20px; right:0; height:.5px; background:var(--wf-sep); }
.wf-agoal { font-size:15px; font-weight:600; letter-spacing:-.01em; }
.wf-agoal q { quotes:"\201C" "\201D"; }
.wf-ameta { font-size:13px; color:var(--wf-text-2); margin-top:4px; display:flex; gap:4px 14px; flex-wrap:wrap; }
.wf-ameta b { color:var(--wf-text); font-weight:600; }
.wf-ameta .w { color:var(--wf-orange); font-weight:500; display:inline-flex; gap:5px; align-items:center; }
.wf-ameta .w .wf-ic { width:13px; height:13px; }
.wf-path { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; margin-top:10px; font-size:13px; }
.wf-why .wf-path { margin-top:0; }
.wf-path .ar { color:var(--wf-text-3); display:inline-flex; }
.wf-path .ar .wf-ic { width:12px; height:12px; }
.wf-path .sk { font-weight:500; }
.wf-path .sk.vac { color:var(--wf-orange); }
.wf-acts { display:flex; gap:6px; align-items:flex-start; justify-content:flex-end; flex-wrap:wrap; }

/* ---------- editor ---------- */
.wf-crumb { border:0; background:transparent; font-size:14px; padding:0; display:inline-flex; gap:2px; align-items:center; margin:12px 0 12px -4px; }
.wf .wf-crumb { color:var(--wf-accent-text); }
.wf-crumb:hover { text-decoration:underline; }
.wf-crumb .wf-ic { width:18px; height:18px; stroke-width:2.2; }
.wf-ed-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.wf-ed-head h1 { font-size:30px; line-height:1.15; font-weight:700; letter-spacing:-.022em; }
.wf-pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.wf-card-head .wf-pills { margin-top:0; }
.wf-ed-head p { margin-top:10px; color:var(--wf-text-2); font-size:15px; max-width:640px; }
.wf-ed-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:4px; }
.wf-dirty { font-size:12.5px; color:var(--wf-orange); font-weight:500; }
.wf-dirty[hidden] { display:none; }

.wf-diffbar { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:12px 12px 12px 16px; margin-bottom:22px; border-radius:14px; background:var(--wf-orange-weak); font-size:13.5px; }
.wf-diffbar > .wf-ic { color:var(--wf-orange); }
.wf-diffbar b { font-weight:600; }
.wf-diffbar .chg { display:inline-flex; gap:6px; align-items:center; color:var(--wf-text-2); }
.wf-diffbar .chg i { font-style:normal; font-weight:700; color:var(--wf-green); }
.wf-diffbar .chg i.m { color:var(--wf-orange); }
.wf-diffbar .chg i.r { color:var(--wf-red); }
.wf-errbox { display:flex; gap:10px; align-items:flex-start; padding:12px 16px; margin-bottom:22px; border-radius:14px; background:var(--wf-red-weak); font-size:13.5px; }
.wf-errbox > .wf-ic { color:var(--wf-red); margin-top:1px; }
.wf-errbox ul { list-style:disc; padding-left:18px; margin-top:4px; }
.wf-note { display:flex; gap:10px; align-items:flex-start; padding:13px 16px; border-radius:14px; background:var(--wf-accent-weak); font-size:13.5px; margin-bottom:22px; }
.wf-note b { font-weight:600; }
.wf-note > .wf-ic { color:var(--wf-accent-text); margin-top:1px; }
.wf-note.sm { margin:10px 12px 12px; padding:10px 12px; font-size:13px; }

/* flow strip */
.wf-strip { display:flex; align-items:center; flex-wrap:wrap; row-gap:16px; padding:14px 20px 6px; }
.wf-fitem { display:flex; align-items:center; min-width:0; }
.wf-flink { flex:none; width:18px; height:1px; background:var(--wf-sep-strong); margin:0 2px; }
.wf-fnode { display:inline-flex; align-items:center; gap:9px; padding:4px 14px 4px 4px; min-height:40px; border-radius:999px; background:var(--wf-fill-2); border:.5px solid var(--wf-sep); max-width:210px; min-width:0; }
.wf-fnode .num { width:30px; height:30px; border-radius:50%; background:var(--wf-surface); box-shadow:0 0 0 .5px var(--wf-sep-strong); display:grid; place-items:center; flex:none; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.wf-fnode .tx { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.wf-fnode .t { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-fnode .s { font-size:11.5px; color:var(--wf-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-fnode.wf-gate .num { background:var(--wf-orange-weak); box-shadow:0 0 0 1.5px var(--wf-orange); color:var(--wf-orange); }
.wf-fnode.opt { background:transparent; border:1px dashed var(--wf-sep-strong); }
.wf-fnode.opt .t { color:var(--wf-text-2); }
.wf-fnode.vac { background:var(--wf-orange-weak); border:1px dashed var(--wf-orange); }
.wf-fnode.vac .s { color:var(--wf-orange); font-weight:500; }
.wf-fpar { display:flex; flex-direction:column; gap:5px; padding:6px; border-radius:24px; background:var(--wf-accent-weak); }
.wf-fpar .lbl { font-size:11.5px; font-weight:600; color:var(--wf-accent-text); padding:0 10px; display:flex; gap:5px; align-items:center; }
.wf-fpar .lbl .wf-ic { width:12px; height:12px; stroke-width:2.2; }
.wf-fpar .wf-fnode { background:var(--wf-surface); }
.wf-fstop { flex:none; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px 0 8px; border-radius:999px; background:var(--wf-text); color:var(--wf-bg); font-size:12px; font-weight:600; }
.wf-fstop .wf-ic { width:12px; height:12px; stroke-width:2.2; }
.wf-legend { display:flex; gap:8px 20px; flex-wrap:wrap; padding:12px 20px 18px; font-size:12.5px; color:var(--wf-text-2); }
.wf-legend span { display:inline-flex; gap:7px; align-items:center; }
.wf-legend i { display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--wf-fill); }
.wf-legend i.g { background:var(--wf-orange-weak); box-shadow:0 0 0 1.5px var(--wf-orange); }
.wf-legend i.o { background:transparent; border:1px dashed var(--wf-text-3); }
.wf-legend i.p { border-radius:5px; background:var(--wf-accent-weak); box-shadow:0 0 0 1px color-mix(in srgb, var(--wf-accent) 40%, transparent); }
.wf-legend i.st { width:auto; height:auto; padding:2px 6px; border-radius:999px; background:var(--wf-text); color:var(--wf-bg); display:inline-flex; }
.wf-legend i.st .wf-ic { width:10px; height:10px; stroke-width:2.4; }

/* steps */
.wf-steps-sec { margin-top:34px; }
.wf-group { background:var(--wf-surface); border-radius:var(--wf-r-card); box-shadow:var(--wf-shadow-sm); overflow:hidden; }
.wf-step { position:relative; display:grid; grid-template-columns:22px 30px minmax(0,1fr) auto; gap:0 12px; align-items:start; padding:16px 18px 16px 10px; transition:background-color .15s ease, opacity .15s ease; }
.wf-group > .wf-step + .wf-step::before, .wf-group > .wf-pgroup + .wf-step::before, .wf-group > .wf-step + .wf-pgroup::before, .wf-pglist > .wf-step + .wf-step::before { content:""; position:absolute; top:0; left:74px; right:0; height:.5px; background:var(--wf-sep); }
.wf-group > .wf-step + .wf-pgroup::before { display:none; }
.wf-step.dragging { opacity:.4; }
.wf-step.over { background:var(--wf-accent-weak); }
.wf-step.vac { background:var(--wf-orange-weak); }
.wf-step.bad { box-shadow:inset 3px 0 0 var(--wf-red); }
.wf-handle { cursor:grab; color:var(--wf-text-3); height:30px; display:grid; place-items:center; border:0; background:transparent; padding:0; opacity:.55; transition:opacity .15s ease; }
.wf-step:hover .wf-handle, .wf-handle:focus-visible { opacity:1; }
.wf-handle .wf-ic { width:16px; height:16px; }
.wf-snum { width:30px; height:30px; border-radius:50%; background:var(--wf-fill); display:grid; place-items:center; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; flex:none; }
.wf-step.wf-gate .wf-snum { background:var(--wf-orange-weak); color:var(--wf-orange); box-shadow:inset 0 0 0 1.5px var(--wf-orange); }
.wf-smain { min-width:0; }
.wf-stitle { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:30px; }
.wf .wf-stitle input { width:auto; min-width:0; max-width:340px; border:0; box-shadow:none; background:transparent; font-weight:600; font-size:15px; letter-spacing:-.01em; padding:3px 6px; margin-left:-6px; border-radius:7px; }
.wf .wf-stitle input:hover { background:var(--wf-fill-2); }
.wf .wf-stitle input:focus { background:var(--wf-surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--wf-accent) 28%, transparent); }
.wf-mark { font-size:12px; font-weight:500; padding:1px 9px; border-radius:999px; color:var(--wf-accent-text); background:var(--wf-accent-weak); }
.wf-who { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:3px; font-size:13.5px; color:var(--wf-text-2); }
.wf-lead { border:0; background:transparent; padding:0 2px; font-weight:600; font-size:13.5px; border-radius:5px; }
.wf .wf-lead { color:var(--wf-accent-text); }
.wf-lead:hover { background:var(--wf-accent-weak); }
.wf-sup { display:inline-flex; align-items:center; gap:2px; color:var(--wf-text); background:var(--wf-fill-2); padding:1px 4px 1px 9px; border-radius:999px; font-size:13px; }
.wf-sup .x { border:0; background:transparent; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; padding:0; }
.wf .wf-sup .x { color:var(--wf-text-3); }
.wf .wf-sup .x:hover { background:var(--wf-red-weak); color:var(--wf-red); }
.wf-sup .x .wf-ic { width:11px; height:11px; stroke-width:2.4; }
.wf-chipadd { border:0; background:transparent; font-size:13px; padding:1px 4px; border-radius:6px; display:inline-flex; align-items:center; gap:3px; }
.wf .wf-chipadd { color:var(--wf-accent-text); }
.wf-chipadd:hover { background:var(--wf-accent-weak); }
.wf-chipadd .wf-ic { width:13px; height:13px; stroke-width:2.2; }
.wf-vactag { display:inline-flex; align-items:center; gap:5px; color:var(--wf-orange); font-weight:500; font-size:13px; }
.wf-vactag .wf-ic { width:14px; height:14px; }
.wf-io { display:flex; flex-wrap:wrap; gap:4px 22px; margin-top:6px; font-size:13px; }
.wf-io .iol { color:var(--wf-text-2); margin-right:5px; }
.wf-sterr { display:flex; gap:6px; align-items:flex-start; margin-top:8px; font-size:13px; color:var(--wf-red); }
.wf-sterr .wf-ic { width:14px; height:14px; margin-top:2px; }
.wf-sside { display:flex; flex-direction:column; gap:8px; align-items:flex-end; padding-top:3px; }
.wf-srow { display:flex; align-items:center; gap:10px; }
.wf-skebab { display:flex; }
.wf-skebab button { border:0; background:transparent; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; padding:0; }
.wf .wf-skebab button { color:var(--wf-text-3); }
.wf-skebab button .wf-ic { width:15px; height:15px; }
.wf .wf-skebab button:hover:not(:disabled) { background:var(--wf-fill); color:var(--wf-text); }
.wf .wf-skebab button.on { color:var(--wf-accent-text); background:var(--wf-accent-weak); }
.wf .wf-skebab button.rm:hover { color:var(--wf-red); background:var(--wf-red-weak); }
.wf-skebab button:disabled { opacity:.3; }
.wf-pgroup { margin:6px 8px; padding:4px 0 2px; border-radius:14px; background:var(--wf-accent-weak); }
.wf-pgroup .glbl { display:flex; gap:10px; align-items:center; padding:8px 14px 2px; font-size:12.5px; font-weight:600; color:var(--wf-accent-text); }
.wf-pgroup .glbl .wf-ic { width:14px; height:14px; stroke-width:2.1; }
.wf-pgroup .glbl button { border:0; background:transparent; font-size:12.5px; font-weight:400; padding:0; margin-left:auto; }
.wf .wf-pgroup .glbl button { color:var(--wf-accent-text); }
.wf-pgroup .glbl button:hover { text-decoration:underline; }
.wf-pglist .wf-step { padding-left:8px; padding-right:12px; }
.wf-pglist .wf-step.vac { background:transparent; }
.wf-stopline { display:flex; align-items:center; gap:12px; margin:18px 6px; }
.wf-stopline::before, .wf-stopline::after { content:""; height:0; border-top:1px dashed var(--wf-sep-strong); flex:1; }
.wf-stopline .fl { display:inline-flex; gap:7px; align-items:center; padding:5px 13px 5px 10px; border-radius:999px; border:0; background:var(--wf-surface); box-shadow:var(--wf-shadow-sm); font-size:13px; font-weight:500; }
.wf-stopline .fl:hover { background:var(--wf-fill-2); }
.wf-stopline .fl .wf-ic { width:14px; height:14px; stroke-width:2; }
.wf-stopline .fl .d { color:var(--wf-text-2); font-weight:400; }
.wf-addrow { display:flex; align-items:center; gap:10px; width:100%; border:0; background:var(--wf-surface); font-size:14px; font-weight:500; padding:15px 20px; border-radius:var(--wf-r-card); box-shadow:var(--wf-shadow-sm); margin-top:22px; text-align:left; transition:background-color .15s ease; }
.wf .wf-addrow { color:var(--wf-accent-text); }
.wf-addrow:hover { background:color-mix(in srgb, var(--wf-surface) 92%, var(--wf-accent)); }
.wf-addrow .pl { width:26px; height:26px; border-radius:50%; background:var(--wf-accent); color:#fff; display:grid; place-items:center; }
.wf-addrow .pl .wf-ic { width:14px; height:14px; stroke-width:2.6; }

/* drawer: floating inspector (bottom sheet on a phone) */
.wf-drawer-back { position:fixed; inset:0; background:var(--wf-backdrop); z-index:45; }
.wf-drawer-back.enter { animation:wf-fade .2s ease; }
.wf-drawer { position:fixed; top:10px; right:10px; bottom:10px; width:min(410px, calc(100vw - 20px)); background:var(--wf-surface); border-radius:20px; box-shadow:var(--wf-shadow-lg); z-index:46; display:flex; flex-direction:column; overflow:hidden; }
.wf-drawer.enter { animation:wf-slide .42s cubic-bezier(.32,.72,0,1); }
.wf-drawer-head { padding:20px 20px 12px; }
.wf-drawer-head h3 { font-size:19px; font-weight:700; letter-spacing:-.018em; }
.wf-drawer-head p { margin:4px 0 14px; font-size:13.5px; color:var(--wf-text-2); }
.wf-searchbox { position:relative; }
.wf-searchbox .wf-ic { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--wf-text-3); width:16px; height:16px; }
.wf .wf-searchbox input { padding-left:34px; background:var(--wf-fill-2); border-color:transparent; box-shadow:none; }
.wf-drawer-list { overflow-y:auto; padding:4px 12px 20px; flex:1; }
.wf-dept { font-size:12.5px; color:var(--wf-text-2); font-weight:600; padding:16px 8px 6px; }
.wf-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:9px 10px; border-radius:12px; border:0; background:transparent; }
.wf-opt:hover { background:var(--wf-fill-2); }
.wf-opt .tx { display:flex; flex-direction:column; min-width:0; }
.wf-opt .nm { font-weight:600; font-size:14px; }
.wf-opt .ds { font-size:13px; color:var(--wf-text-2); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wf-opt .add { margin-left:auto; color:var(--wf-accent-text); font-weight:500; font-size:13.5px; flex:none; }
.wf-opt.vac .nm { color:var(--wf-orange); }
@keyframes wf-fade { from { opacity:0; } to { opacity:1; } }
@keyframes wf-slide { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes wf-sheet { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }

/* two columns */
.wf-cols { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:22px; align-items:start; }
.wf-cols > .wf-card + .wf-card { margin-top:0; }

/* when to use */
.wf-chips { display:flex; flex-wrap:wrap; gap:6px; }
.wf-choice { border:0; background:var(--wf-fill); font-size:13px; padding:5px 12px; border-radius:999px; font-weight:500; transition:background-color .15s ease; }
.wf-choice:hover { background:var(--wf-fill-3); }
.wf .wf-choice.on { background:var(--wf-accent); color:var(--wf-accent-ink); }
.wf-tagbox { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:7px; border:.5px solid var(--wf-sep-strong); border-radius:12px; background:var(--wf-surface); }
.wf-tagbox:focus-within { border-color:var(--wf-accent); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--wf-accent) 28%, transparent); }
.wf .wf-tagbox input { border:0; padding:4px 6px; width:auto; flex:1; min-width:150px; box-shadow:none; background:transparent; }
.wf .wf-tagbox input:focus { box-shadow:none; }
.wf-tag { display:inline-flex; gap:3px; align-items:center; font-size:13px; padding:3px 4px 3px 11px; border-radius:999px; background:var(--wf-accent-weak); color:var(--wf-accent-text); font-weight:500; }
.wf-tag.no { background:var(--wf-red-weak); color:var(--wf-red); }
.wf-tag button { border:0; background:transparent; opacity:.6; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; padding:0; }
.wf .wf-tag button { color:inherit; }
.wf-tag button:hover { opacity:1; background:rgba(0,0,0,.06); }
.wf-tag button .wf-ic { width:11px; height:11px; stroke-width:2.4; }
.wf-examples { border-radius:12px; background:var(--wf-fill-2); margin-bottom:8px; }
.wf-examples li { display:flex; gap:6px; align-items:center; padding:7px 6px 7px 14px; font-size:14px; }
.wf-examples li + li { border-top:.5px solid var(--wf-sep); }
.wf-stepper { display:flex; gap:6px; align-items:center; }
.wf .wf-stepper input { width:90px; text-align:center; font-variant-numeric:tabular-nums; }
.wf-presets { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 14px; }
.wf-presets button { border:0; background:var(--wf-fill); font-size:13px; padding:5px 12px; border-radius:999px; text-align:left; transition:background-color .15s ease; }
.wf-presets button:hover { background:var(--wf-fill-3); }
.wf-testopts { display:flex; gap:10px 18px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.wf-inline { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--wf-text-2); }
.wf .wf-inline select { width:auto; min-width:0; max-width:220px; padding-top:5px; padding-bottom:5px; font-size:13px; }
.wf .wf-tester textarea { font-size:15px; min-height:70px; }
.wf-verdict { border-radius:14px; overflow:hidden; margin-top:16px; background:var(--wf-fill-2); }
.wf-verdict-top { display:flex; gap:12px; align-items:flex-start; padding:16px; }
.wf-verdict-top .big { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--wf-switch); color:#fff; }
.wf-verdict-top .big .wf-ic { width:18px; height:18px; stroke-width:2.6; }
.wf-verdict-top.none .big { background:#FF9F0A; }
.wf-verdict-top.none .big .wf-ic { width:24px; height:24px; }
.wf-verdict-top h3 { font-size:16px; font-weight:600; letter-spacing:-.01em; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.wf-verdict-top p { margin-top:3px; font-size:13.5px; color:var(--wf-text-2); }
.wf-why { margin:0 12px 12px; padding:4px; font-size:13.5px; background:var(--wf-surface); border-radius:12px; }
.wf-why li { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:10px; }
.wf-why li + li { border-top:.5px solid var(--wf-sep); }
.wf-why .k { color:var(--wf-text-2); }
.wf-others { padding:0 16px 14px; font-size:13px; color:var(--wf-text-2); }

/* stop points */
.wf-rail { padding:6px 0 8px; }
.wf-rail li.rs { display:flex; gap:12px; align-items:center; padding:9px 20px; font-size:14px; position:relative; }
.wf-rail li.rs + li.rs::before { content:""; position:absolute; top:0; left:60px; right:0; height:.5px; background:var(--wf-sep); }
.wf-rail li.rs .wf-snum { width:26px; height:26px; font-size:11.5px; }
.wf-rail li.rs .skn { margin-left:auto; font-size:13px; color:var(--wf-text-2); text-align:right; }
.wf-rail li.rs.dim { color:var(--wf-text-2); }
.wf-rail li.rstop { margin:8px 12px; padding:9px 14px; border-radius:12px; display:flex; gap:9px; align-items:center; font-size:13.5px; font-weight:600; background:var(--wf-fill-2); border:1px dashed var(--wf-sep-strong); }
.wf-rail li.rstop.def { background:var(--wf-text); color:var(--wf-bg); border-color:transparent; }
.wf-rail li.rstop.def .wf-cat { background:rgba(127,127,127,.28); color:inherit; }
.wf-rail li.rstop.bad { color:var(--wf-red); border-color:var(--wf-red); font-weight:500; }
.wf-rail li.rstop .wf-ic { width:15px; height:15px; stroke-width:2; }
.wf-stopcard { padding:16px 20px; position:relative; }
.wf-stopcard + .wf-stopcard::before { content:""; position:absolute; top:0; left:20px; right:0; height:.5px; background:var(--wf-sep); }
.wf-stopcard h3 { font-size:15px; font-weight:600; display:flex; gap:8px; align-items:center; }
.wf-stopcard h3 > .wf-ic { width:15px; height:15px; flex:none; }
.wf input.wf-inline-name[type=text] { width:auto; flex:0 1 260px; min-width:0; border:0; box-shadow:none; background:transparent; font-weight:600; font-size:15px; padding:3px 6px; margin-left:-6px; border-radius:7px; }
.wf input.wf-inline-name[type=text]:hover { background:var(--wf-fill-2); }
.wf-stopcard dl { display:grid; grid-template-columns:140px minmax(0,1fr); gap:10px 14px; margin:12px 0 0; font-size:13.5px; align-items:center; }
.wf-stopcard dt { color:var(--wf-text-2); }
.wf-stopcard dd { margin:0; min-width:0; }
.wf .wf-stopcard dd .wf-switch { white-space:normal; }
.wf-quote { margin:0 0 24px; padding:18px 22px; background:var(--wf-surface); border-radius:var(--wf-r-card); box-shadow:var(--wf-shadow-sm); }
.wf-quote small { display:block; color:var(--wf-text-2); font-size:12.5px; margin-bottom:6px; }
.wf-quote q { font-size:18px; font-weight:600; letter-spacing:-.014em; quotes:"\201C" "\201D"; }

/* guardrails */
.wf-grule { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; padding:16px 20px; position:relative; }
.wf-grule + .wf-grule::before { content:""; position:absolute; top:0; left:20px; right:0; height:.5px; background:var(--wf-sep); }
.wf-grule h3 { font-size:15px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; letter-spacing:-.01em; }
.wf-grule p { margin-top:4px; color:var(--wf-text-2); font-size:13.5px; max-width:720px; }
.wf-grule.off h3 span:first-child, .wf-grule.off p { color:var(--wf-text-2); }
.wf-grule.bad h3 { color:var(--wf-red); }
.wf-at { display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:13px; color:var(--wf-text-2); }
.wf .wf-at select { width:auto; max-width:100%; padding:5px 30px 5px 10px; font-size:13px; }
.wf-at .wf-seg button { padding:4px 12px; font-size:12.5px; }
.wf-gside { display:flex; gap:12px; align-items:center; padding-top:2px; }
.wf-sev { font-size:12px; font-weight:500; padding:1px 9px; border-radius:999px; color:var(--wf-text-2); background:var(--wf-fill); }
.wf-gslug { font-size:12.5px; color:var(--wf-text-2); font-family:var(--wf-mono); }

/* versions */
.wf-vtable td { vertical-align:top; }
.wf-vtable .vn { font-weight:600; font-size:15px; }
.wf-vtable .when { white-space:nowrap; }
.wf-vtable .log { font-size:13.5px; max-width:440px; }
.wf-vtable tr.liverow td { background:color-mix(in srgb, var(--wf-surface) 88%, #34C759); }
.wf-vtable .wf-acts { justify-content:flex-end; }
.wf-log li { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; padding:10px 20px; font-size:13.5px; }
.wf-log li + li { border-top:.5px solid var(--wf-sep); }

/* auto-composed review */
.wf-alist { padding:4px 0 8px; }
.wf-alist li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:12px 20px; position:relative; align-items:start; }
.wf-alist li + li::before { content:""; position:absolute; top:0; left:62px; right:0; height:.5px; background:var(--wf-sep); }
.wf-alist li.vac { background:var(--wf-orange-weak); }
.wf-alist b { font-weight:600; font-size:14.5px; }
.wf-alist .d { font-size:13.5px; color:var(--wf-text-2); margin-top:2px; }
.wf-alist .d .lead { color:var(--wf-accent-text); font-weight:600; margin-right:6px; }
.wf-reasons { padding:4px 0 4px; }
.wf-reasons li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:12px 20px; font-size:14px; position:relative; }
.wf-reasons li + li::before { content:""; position:absolute; top:0; left:62px; right:0; height:.5px; background:var(--wf-sep); }
.wf-reasons b { font-weight:600; }
.wf-reasons p { margin-top:3px; font-size:13.5px; color:var(--wf-text-2); }
.wf-reasons .wf-snum { width:28px; height:28px; font-size:12px; }

/* stage wording */
.wf-wgrid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:22px; align-items:start; }
.wf-wnav { background:var(--wf-surface); border-radius:var(--wf-r-card); box-shadow:var(--wf-shadow-sm); padding:4px 8px 12px; position:sticky; top:12px; max-height:calc(100vh - 110px); overflow-y:auto; }
.wf-wnav-i { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; border:0; background:transparent; padding:7px 10px; border-radius:10px; font-size:13.5px; }
.wf-wnav-i:hover { background:var(--wf-fill-2); }
.wf-wnav-i.on { background:var(--wf-fill-3); font-weight:600; }
.wf-wfield { padding:14px 0; border-top:.5px solid var(--wf-sep); }
.wf-wfield.bad { box-shadow:inset 3px 0 0 var(--wf-red); padding-left:10px; }
.wf-wfield-h { display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.wf-wl { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; align-items:center; font-size:13px; color:var(--wf-text-2); margin-top:6px; }
.wf-wacts { display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:.5px solid var(--wf-sep); }
.wf-wacts .wf-faint { font-size:13px; }
.wf-wvers { padding:0 0 10px; }
.wf-wvers li { display:flex; gap:10px; align-items:center; padding:10px 20px; font-size:13.5px; flex-wrap:wrap; }
.wf-wvers li + li { border-top:.5px solid var(--wf-sep); }
.wf-wvers .vn { font-weight:600; }
.wf-wvers .log { color:var(--wf-text-2); }

/* dialog body (the shared .sk-dlg from skills-ui.css) */
.sk-dlg .wf-dlg-l { display:block; font-size:13px; font-weight:600; color:var(--sk-t1); margin:14px 0 6px; }
.sk-dlg .wf-dlg-chg { list-style:none; margin:0; padding:4px 12px; border-radius:12px; background:var(--sk-fill-h); max-height:200px; overflow-y:auto; }
.sk-dlg .wf-dlg-chg li { display:flex; gap:10px; align-items:baseline; padding:6px 0; font-size:13.5px; color:var(--sk-t1); }
.sk-dlg .wf-dlg-chg li + li { border-top:.5px solid var(--sk-hair); }
.sk-dlg .wf-dlg-chg .k { font-weight:700; width:12px; flex:none; }
.sk-dlg .wf-dlg-chg .k.add { color:var(--sk-ok); } .sk-dlg .wf-dlg-chg .k.change { color:var(--sk-warn); } .sk-dlg .wf-dlg-chg .k.remove { color:var(--sk-crit); }
.sk-dlg .wf-dlg-ta, .sk-dlg .wf-dlg-in { width:100%; font:inherit; font-size:14px; color:var(--sk-t1); background:var(--sk-surface); border:1px solid var(--sk-line); border-radius:10px; padding:8px 11px; box-sizing:border-box; }
.sk-dlg .wf-dlg-ta { min-height:74px; resize:vertical; }
.sk-dlg .wf-dlg-ta:focus, .sk-dlg .wf-dlg-in:focus { outline:none; border-color:var(--sk-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--sk-accent) 28%, transparent); }
.sk-dlg .wf-dlg-info { margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--sk-fill-h); font-size:13px; color:var(--sk-t2); }
.sk-dlg .wf-dlg-info b { color:var(--sk-t1); }
.sk-dlg .wf-dlg-warn { display:flex; gap:10px; align-items:flex-start; margin:10px 0; padding:10px 12px; border-radius:10px; background:var(--sk-warn-bg); color:var(--sk-t1); font-size:13.5px; }
.sk-dlg .wf-dlg-warn .wf-ic { width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke:var(--sk-warn); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sk-dlg .wf-dlg-hint { margin-top:12px; font-size:13px; color:var(--sk-t3); }

/* ---------- responsive ---------- */
@media (max-width:1000px) {
  .wf-cols { grid-template-columns:1fr; }
  .wf-wgrid { grid-template-columns:1fr; }
  .wf-wnav { position:static; max-height:none; display:flex; gap:4px; overflow-x:auto; padding:6px; flex-wrap:nowrap; scrollbar-width:none; }
  .wf-wnav .wf-dept { display:none; }
  .wf-wnav-i { flex:none; width:auto; }
  .wf-wnav-i .wf-skey { display:none; }
}
@media (max-width:760px) {
  .wf-table thead { display:none; }
  .wf-table, .wf-table tbody, .wf-table tr, .wf-table td { display:block; width:100%; }
  .wf-table tr { padding:16px 18px; border-bottom:.5px solid var(--wf-sep); position:relative; }
  .wf-table tr:last-child { border-bottom:0; }
  .wf-table td { border:0; padding:0; }
  .wf-table td.num { text-align:left; }
  .wf-table td[data-l] { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding-top:7px; }
  .wf-table td[data-l]::before { content:attr(data-l); color:var(--wf-text-2); }
  .wf-table .wf-status { flex-direction:row; flex-wrap:wrap; margin-top:10px; }
  .wf-table td.chev { position:absolute; right:12px; top:18px; width:auto; }
  .wf-table .wf-name { padding-right:22px; }
  .wf-vtable td { padding:3px 0; text-align:left !important; }
  .wf-vtable .wf-acts { justify-content:flex-start; margin-top:6px; }
  .wf-controller { grid-template-columns:1fr; gap:18px; padding:18px; }
  .wf-ctl-flow { flex-direction:column; align-items:flex-start; gap:10px; }
  .wf-ctl-flow .arr { display:none; }
  .wf-ctl-flow > .n.alt:last-child { padding-left:30px; }
  .wf-ctl-numbers > div { flex:1; padding:0 12px; }
  .wf-ctl-numbers > div:first-child { padding-left:0; }
  .wf-tabs-row .wf-seg { display:flex; width:100%; }
  .wf-tabs-row .wf-seg button { flex:1 1 auto; min-width:0; justify-content:center; padding:5px 6px; gap:4px; font-size:12px; }
  .wf-table td[data-l] > span { text-align:right; }
  .wf-lg { display:none; }
  .wf-step { grid-template-columns:18px 30px minmax(0,1fr); padding:14px 14px 14px 6px; }
  .wf-sside { grid-column:3; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:10px 16px; margin-top:12px; }
  .wf-group > .wf-step + .wf-step::before, .wf-pglist > .wf-step + .wf-step::before { left:60px; }
  .wf-acard { grid-template-columns:1fr; }
  .wf-acts { justify-content:flex-start; }
  .wf-grule { grid-template-columns:1fr; }
  .wf-gside { position:absolute; top:14px; right:16px; }
  .wf-grule h3 { padding-right:56px; }
  .wf-log li { grid-template-columns:1fr; gap:2px; }
}
@media (max-width:620px) {
  .wf-page { padding:4px 4px 56px; }
  .wf-page-head h1 { font-size:30px; }
  .wf-page-head { margin-bottom:20px; }
  .wf-head-acts { width:100%; }
  .wf-head-acts .wf-btn { flex:1; min-height:40px; }
  .wf-ed-head h1 { font-size:26px; }
  .wf-ed-actions { width:100%; }
  .wf-ed-actions .wf-btn:not(.ghost) { flex:1; min-height:40px; }
  .wf-card-head, .wf-card-body { padding-left:16px; padding-right:16px; }
  .wf-drawer { top:auto; left:0; right:0; bottom:0; width:100%; height:86vh; border-radius:20px 20px 0 0; }
  .wf-drawer.enter { animation:wf-sheet .42s cubic-bezier(.32,.72,0,1); }
  .wf-why li { grid-template-columns:1fr; gap:2px; }
  .wf-stopcard dl { grid-template-columns:1fr; gap:4px; }
  .wf-stopcard dd { margin-bottom:8px; }
  .wf-wl { grid-template-columns:1fr; gap:4px; }
  .wf-strip { padding-left:14px; padding-right:14px; }
  .wf-fnode { max-width:180px; }
}
@media (prefers-reduced-motion: reduce) {
  .wf *, .wf *::before, .wf *::after { animation:none !important; transition:none !important; }
}