/* WorkflowQ — screen-specific styles on top of the QShell Template kit (kit.css/app.css).
   Prefix: wq-. Operations-console density: tighter than the showcase kit pages. */

/* [hidden] must always win — kit display classes (inline-flex etc.) otherwise beat the UA rule */
[hidden] { display: none !important; }

.qsa-content { max-width: 1280px; }

/* ---- Demo toolbar (preview-only, not part of the product design) ---- */
.wq-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: -8px 0 20px; border: 1px dashed var(--glass-border); border-radius: var(--radius-dropdown); font: var(--text-small); color: var(--color-secondary-text); }
.wq-demo select { font: var(--text-small); font-family: inherit; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: var(--glass-field); color: var(--color-primary-text); }
.wq-demo .qsa-tabs { padding: 3px; }
.wq-demo .qsa-tab { padding: 4px 12px; font-size: 12px; }

/* ---- Page header row: title + tenant context ---- */
.wq-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.wq-head .qsa-title { margin: 0; flex: 1; }
.wq-tenant { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Status language ---- */
.wq-ok   { color: oklch(0.55 0.13 155); }
.wq-warn { color: oklch(0.62 0.13 80); }
.wq-bad  { color: oklch(0.58 0.18 25); }
[data-theme="dark"] .wq-ok   { color: oklch(0.75 0.11 155); }
[data-theme="dark"] .wq-warn { color: oklch(0.8 0.11 85); }
[data-theme="dark"] .wq-bad  { color: oklch(0.72 0.14 25); }

/* ---- Dashboard: state-count strip ---- */
.wq-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.wq-tile { padding: 14px 18px; }
.wq-tile .qsa-stat-value { font-size: 26px; }
.wq-tile-alarm { border-color: oklch(0.58 0.18 25 / 0.55); background: color-mix(in oklab, oklch(0.58 0.18 25) 9%, var(--glass-panel)); }
.wq-tile-alarm .qsa-stat-value, .wq-tile-alarm .qsa-stat-label { color: oklch(0.5 0.18 25); }
[data-theme="dark"] .wq-tile-alarm .qsa-stat-value, [data-theme="dark"] .wq-tile-alarm .qsa-stat-label { color: oklch(0.78 0.13 25); }
.wq-tile-calm { border-color: oklch(0.6 0.12 155 / 0.5); }
.wq-tile-calm .qsa-stat-value { color: oklch(0.5 0.12 155); }
[data-theme="dark"] .wq-tile-calm .qsa-stat-value { color: oklch(0.78 0.1 155); }

/* ---- Attention list / cause rows ---- */
.wq-causes .qsa-list-group-item { cursor: pointer; }
.wq-cause-count { margin-left: auto; }

/* ---- Engine strip ---- */
.wq-engines { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: var(--text-small); color: var(--color-secondary-text); }
.wq-engines .qsa-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- Charts row ---- */
.wq-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wq-chart-box { min-height: 150px; }

/* ---- Editor (Flows): IDE frame with draggable splitter ---- */
.wq-ide { --explorer-w: 240px; display: flex; align-items: stretch; height: calc(100vh - 176px); min-height: 420px; border: 0; border-top: 1px solid var(--glass-border); border-radius: 0; background: none; overflow: hidden; margin: 0 -32px -32px; }
body.wq-flows-page .qsa-content { max-width: none; }
@media (max-width: 700px) { .wq-ide { margin: 0 -16px -20px; } }
.wq-ide-explorer { width: var(--explorer-w); flex: none; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wq-ide.explorer-collapsed .wq-ide-explorer { width: 38px; }
.wq-ide.explorer-collapsed .wq-splitter { pointer-events: none; }
.wq-explorer-body { flex: 1; overflow-y: auto; min-height: 0; }
.wq-splitter { flex: none; width: 5px; cursor: col-resize; background: transparent; border-left: 1px solid var(--glass-border); transition: background 0.15s; }
.wq-splitter:hover, .wq-splitter.dragging { background: color-mix(in oklab, var(--qsk-accent) 45%, transparent); }
.wq-ide-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* attribute tooltips — rendered by wq.js into a fixed body-level layer (immune to overflow/stacking) */
[data-qsa-tooltip]::after, [data-qsa-tooltip]::before { display: none !important; } /* suppress kit.css ::after/::before capsule — wq.js owns tooltip rendering */
.wq-tt { position: fixed; z-index: 9999; padding: 6px 12px; border-radius: 8px; background: oklch(0.18 0.02 260 / 0.95); color: #fff; font-family: var(--font-family); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-popover); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.12s, transform 0.12s; }
.wq-tt.show { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .wq-tt { background: oklch(0.95 0.005 260 / 0.97); color: oklch(0.2 0.02 260); }

/* import drop zone */
.wq-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; border: 1.5px dashed var(--glass-border); border-radius: var(--radius-dropdown); color: var(--color-secondary-text); font: var(--text-small); cursor: pointer; transition: var(--transition); text-align: center; }
.wq-drop:hover, .wq-drop.over { border-color: var(--qsk-accent); color: var(--qsk-accent); background: color-mix(in oklab, var(--qsk-accent) 6%, transparent); }
.wq-drop.has-file { border-style: solid; border-color: oklch(0.6 0.13 155 / 0.6); color: var(--color-primary-text); }

/* IDE toolbar */
.wq-ide-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 10px; border-bottom: 1px solid var(--glass-border); flex-wrap: wrap; position: relative; z-index: 6; }
.wq-ide-toolbar .wq-run-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wq-ide-toolbar .qsa-badge { white-space: nowrap; flex: none; }
.wq-tool { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--color-secondary-text); cursor: pointer; transition: var(--transition); }
.wq-tool:hover { background: var(--glass-well); color: var(--color-primary-text); }
.wq-tool-run:hover { color: oklch(0.55 0.13 155); }
[data-theme="dark"] .wq-tool-run:hover { color: oklch(0.75 0.11 155); }
.wq-tool-danger:hover { color: oklch(0.58 0.18 25); }
[data-theme="dark"] .wq-tool-danger:hover { color: oklch(0.72 0.14 25); }
.wq-tool-sep { width: 1px; height: 18px; background: var(--glass-border); margin: 0 6px; flex: none; }
.wq-flowstate { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font: var(--text-small); color: var(--color-secondary-text); background: var(--glass-well); }
.wq-flowstate i, .wq-vrow i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-draft { background: var(--qsk-accent, var(--color-primary)); }
.st-active { background: oklch(0.6 0.13 155); }
.st-stopped { background: oklch(0.72 0.14 85); }

/* versions pane (bottom of explorer) */
.wq-versions-pane { border-top: 1px solid var(--glass-border); flex: none; }
.wq-versions-head { padding: 8px 12px 4px; font: var(--text-small); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary-text); }
.wq-versionlist { display: flex; flex-direction: column; padding: 2px 6px 8px; }
.wq-vrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 6px; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--color-secondary-text); cursor: pointer; transition: var(--transition); text-align: left; min-width: 0; }
.wq-vrow:hover { background: var(--glass-well); color: var(--color-primary-text); }
.wq-vrow.is-open { background: color-mix(in oklab, var(--qsk-accent) 13%, transparent); color: var(--qsk-accent); }
.wq-vrow .v { font-weight: 700; flex: none; }
.wq-vrow .when { flex: none; opacity: 0.8; }
.wq-vrow .who { font-family: var(--font-family); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-collapsed .wq-versions-pane { display: none; }

.wq-ide-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--glass-border); overflow-x: auto; scrollbar-width: thin; position: relative; z-index: 5; }
.wq-ide-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px 8px 14px; font-family: var(--font-family); font-size: 12.5px; color: var(--color-secondary-text); border-right: 1px solid var(--glass-border); min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.wq-ide-tab .fnm { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.wq-ide-tab .lock { flex: none; opacity: 0.75; }
.wq-ide-tab .chg { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.58 0.18 25); flex: none; }
[data-theme="dark"] .wq-ide-tab .chg { background: oklch(0.72 0.14 25); }
.wq-ide-tab .chg.clean { background: var(--color-gray-500); opacity: 0.55; }
.wq-valid .wq-ide-tab.is-active .chg { background: var(--color-gray-500); opacity: 0.55; }
.wq-ide-tab .tab-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 4px; background: none; color: var(--color-gray-500); cursor: pointer; padding: 0; transition: var(--transition); }
.wq-ide-tab .tab-x:hover { background: var(--glass-well); color: var(--color-primary-text); }
.wq-ide-tab.is-active { color: var(--color-primary-text); background: var(--glass-well); box-shadow: inset 0 -2px 0 var(--qsk-accent); }
.wq-ide-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wq-ide-editor .wq-code { flex: 1; overflow: auto; margin: 0; }
.wq-ide-status { display: flex; align-items: center; gap: 10px; padding: 5px 14px; border-top: 1px solid var(--glass-border); font: var(--text-small); color: var(--color-secondary-text); }
@media (max-width: 900px) { .wq-ide { height: auto; } }

/* VSCode-style explorer */
.wq-explorer-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--glass-border); cursor: pointer; font: var(--text-small); font-family: inherit; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary-text); transition: var(--transition); }
.wq-explorer-head .cnt { margin-left: auto; font-size: 10.5px; }
.wq-explorer-head:hover { color: var(--color-primary-text); }
.wq-explorer-head .caret { transition: transform 0.2s; transform: rotate(90deg); flex: none; }
.explorer-collapsed .wq-explorer-head { border-bottom: 0; padding: 10px; justify-content: center; }
.explorer-collapsed .wq-explorer-head .caret { transform: rotate(0deg); }
.explorer-collapsed .wq-explorer-head .lbl, .explorer-collapsed .wq-explorer-head .cnt { display: none; }
.explorer-collapsed .wq-explorer-body { display: none; }
.wq-flowlist { display: flex; flex-direction: column; gap: 1px; padding: 6px; }
/* one-layer tree: folders + indented items */
.wq-folder { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: var(--text-small); color: var(--color-secondary-text); transition: var(--transition); text-align: left; }
.wq-folder:hover { background: var(--glass-well); color: var(--color-primary-text); }
.wq-folder .fcaret { flex: none; transform: rotate(90deg); transition: transform 0.15s; }
.wq-folder[aria-expanded="false"] .fcaret { transform: rotate(0deg); }
.wq-folder .fico { flex: none; opacity: 0.7; }
.wq-folder .flbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-folder-items { display: flex; flex-direction: column; gap: 1px; padding-left: 28px; }
.wq-folder-items.collapsed { display: none; }
.wq-root-items { padding-left: 0; margin-top: 2px; }
.wq-flowlist a { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--color-primary-text); font-family: var(--font-family); font-size: 12.5px; line-height: 17px; transition: var(--transition); }
.wq-flowlist .fname { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wq-flowlist .fname > span, .wq-flowlist .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-flowlist .fname i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--qsk-accent); opacity: 0.55; }
.wq-flowlist .fname .errdot { flex: none; margin-left: auto; font: 700 10px/14px var(--font-family); color: oklch(0.58 0.18 25); }
[data-theme="dark"] .wq-flowlist .fname .errdot { color: oklch(0.72 0.14 25); }
.wq-flowlist small { font: var(--text-small); font-size: 10.5px; color: var(--color-secondary-text); padding-left: 15px; }
.wq-flowlist a:hover { background: var(--glass-well); }
.wq-flowlist a.is-active { background: color-mix(in oklab, var(--qsk-accent) 13%, transparent); }
.wq-flowlist a.is-active, .wq-flowlist a.is-active small { color: var(--qsk-accent); }

.wq-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 20px; margin: 0; padding: 14px 0; overflow: auto; tab-size: 2; }
.wq-code .ln { display: flex; min-height: 20px; }
.wq-code .no { flex: none; width: 36px; padding-right: 12px; text-align: right; color: var(--color-gray-500); opacity: 0.6; user-select: none; }
/* gutter problem icon before the line number */
.wq-code .gut { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; position: relative; }
.wq-code .gut svg { display: block; }
.wq-code .gut .wq-hovermsg { left: 22px; top: 50%; transform: translateY(-50%) translateX(4px); }
.wq-code .gut:hover .wq-hovermsg { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.wq-valid .wq-code .gut svg { display: none; }
.wq-code .no::after { content: ''; }
.wq-code .tx { white-space: pre; flex: 1; padding-right: 16px; }
.wq-code .ln:hover { background: var(--glass-well); }
.wq-code .ln.is-error { background: oklch(0.58 0.18 25 / 0.07); }
.wq-code .ln.is-error:has(.wq-warn) { background: oklch(0.7 0.13 80 / 0.08); }
/* YAML tint — quiet, two-hue: keys ink, values secondary, strings/refs accent-leaning */
.wq-code .k { color: var(--color-primary-text); font-weight: 500; }
.wq-code .v { color: var(--color-secondary-text); }
.wq-code .s { color: oklch(0.52 0.1 155); }
[data-theme="dark"] .wq-code .s { color: oklch(0.78 0.09 155); }
.wq-code .r { color: var(--qsk-accent); }
.wq-code .c { color: var(--color-gray-500); font-style: italic; }
/* the squiggle + hover message */
.wq-squiggle { text-decoration: underline wavy oklch(0.58 0.18 25) 1.5px; text-underline-offset: 3px; position: relative; }
.wq-squiggle:hover .wq-hovermsg, .wq-squiggle:focus .wq-hovermsg { opacity: 1; pointer-events: auto; transform: translateY(0); }
.wq-hovermsg { position: absolute; z-index: 70; left: 0; top: calc(100% + 8px); width: max-content; max-width: 380px; white-space: normal; padding: 10px 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-dropdown); background: var(--overlay); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-popover); font-family: var(--font-family); font-size: 12.5px; line-height: 18px; color: var(--color-primary-text); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.wq-hovermsg code { color: var(--qsk-accent); }

.wq-problems { display: flex; flex-direction: column; gap: 2px; }
.wq-problem { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 18px; cursor: pointer; color: var(--color-secondary-text); transition: var(--transition); background: none; border: 0; text-align: left; font-family: inherit; width: 100%; }
.wq-problem:hover { background: var(--glass-well); color: var(--color-primary-text); }
.wq-problem svg { flex: none; margin-top: 2px; }

.wq-versions { display: flex; flex-direction: column; }
.wq-version { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--glass-border); font-size: 12.5px; }
.wq-version:first-child { border-top: 0; }
.wq-version .who { color: var(--color-secondary-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dirty dot on the editor card title */
.wq-dirty::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--qsk-accent); margin-left: 8px; vertical-align: 2px; }

/* ---- Control: master-detail ---- */
.wq-md { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .wq-md { grid-template-columns: minmax(0, 1fr); } }
.wq-bucket-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--glass-well); border-radius: 8px; font: var(--text-small); color: var(--color-secondary-text); margin-top: 12px; }
.wq-bucket-head:first-child { margin-top: 0; }
.wq-runrow { cursor: pointer; }
.wq-runrow.is-selected { background: color-mix(in oklab, var(--qsk-accent) 11%, transparent); }
.wq-restart { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.wq-restart .qsa-check { padding: 8px 12px; border: 1px solid var(--glass-border); border-radius: 10px; transition: var(--transition); }
.wq-restart .qsa-check:has(input:checked) { border-color: var(--qsk-accent); background: color-mix(in oklab, var(--qsk-accent) 8%, transparent); }
.wq-fence { display: flex; align-items: center; gap: 8px; font: var(--text-small); color: var(--color-gray-500); }

/* ---- Debugger ---- */
.wq-dbg { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .wq-dbg { grid-template-columns: minmax(0, 1fr); } }
.wq-dbg > *, .wq-md > *, .wq-editor-grid > * { min-width: 0; }
.wq-trace { display: flex; flex-direction: column; }
.wq-step { border-top: 1px solid var(--glass-border); }
.wq-step:first-child { border-top: 0; }
.wq-step > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; transition: var(--transition); }
.wq-step > summary::-webkit-details-marker { display: none; }
.wq-step > summary:hover { background: var(--glass-well); }
.wq-step.is-selected > summary { background: color-mix(in oklab, var(--qsk-accent) 11%, transparent); }
.wq-step .kind { font: var(--text-small); color: var(--color-secondary-text); width: 72px; flex: none; }
.wq-step .ms { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-secondary-text); }
.wq-step-body { padding: 4px 12px 12px 34px; font-size: 12.5px; color: var(--color-secondary-text); }
.wq-step-body pre { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 18px; background: var(--glass-well); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; overflow: auto; }
.wq-audit { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--glass-border); font: var(--text-small); color: var(--qsk-accent); background: color-mix(in oklab, var(--qsk-accent) 7%, transparent); }

/* flow diagram */
.wq-diagram { display: flex; flex-direction: column; gap: 0; padding: 6px 2px; }
.wq-node { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--color-secondary-text); width: max-content; position: relative; }
.wq-node .pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--glass-border); border-radius: 100px; background: var(--glass-field); transition: var(--transition); }
.wq-node.on .pill { border-color: color-mix(in oklab, var(--qsk-accent) 55%, transparent); background: color-mix(in oklab, var(--qsk-accent) 12%, transparent); color: var(--color-primary-text); }
.wq-node.fail .pill { border-color: oklch(0.58 0.18 25 / 0.6); background: oklch(0.58 0.18 25 / 0.1); color: var(--color-primary-text); }
.wq-node .tag { font: var(--text-small); color: var(--color-gray-500); }
.wq-edge { width: 1px; height: 12px; background: var(--glass-border); margin-left: 60px; }
.wq-edge.on { background: color-mix(in oklab, var(--qsk-accent) 55%, transparent); width: 2px; }
.wq-branch { margin-left: 40px; border-left: 1px dashed var(--glass-border); padding-left: 16px; }

/* test bench */
.wq-bench textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 19px; min-height: 150px; }

/* ---- Logs ---- */
.wq-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wq-filterbar .qsa-field { padding: 7px 14px; }
.wq-sel { font: var(--text-small); font-family: inherit; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: var(--glass-field); color: var(--color-primary-text); }
.wq-sel option { background: var(--color-bg); color: var(--color-primary-text); }
.wq-log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 19px; }
.wq-logline { display: flex; gap: 14px; padding: 4px 12px; border-radius: 6px; white-space: nowrap; }
.wq-logline:hover { background: var(--glass-well); }
.wq-logline .t { color: var(--color-gray-500); flex: none; }
.wq-logline .run { color: var(--qsk-accent); flex: none; cursor: pointer; text-decoration: none; }
.wq-logline .run:hover { text-decoration: underline; }
.wq-logline .flow, .wq-logline .ten { color: var(--color-secondary-text); flex: none; }
.wq-logline .lv { flex: none; width: 52px; font-weight: 700; font-size: 11px; letter-spacing: 0.03em; }
.wq-logline .msg { color: var(--color-primary-text); overflow: hidden; text-overflow: ellipsis; }
.wq-logline.is-audit { background: color-mix(in oklab, var(--qsk-accent) 7%, transparent); border-left: 2px solid var(--qsk-accent); }
.wq-logline.is-audit:hover { background: color-mix(in oklab, var(--qsk-accent) 12%, transparent); }
.wq-logline.is-audit .msg { color: var(--qsk-accent); }

/* ---- Shared empty/error/loading states ---- */
.wq-state { text-align: center; padding: 56px 20px; }
.wq-state .big { font: var(--text-subtitle); color: var(--color-primary-text); margin: 14px 0 4px; }
.wq-state p { color: var(--color-secondary-text); margin: 0 0 16px; }
.wq-state-good svg { color: oklch(0.6 0.13 155); }
[data-theme="dark"] .wq-state-good svg { color: oklch(0.76 0.11 155); }
.wq-state-bad svg { color: oklch(0.58 0.18 25); }
[data-theme="dark"] .wq-state-bad svg { color: oklch(0.72 0.14 25); }

/* valid state: clear the error styling in the code pane (same DOM, class toggled on body) */
.wq-valid .wq-code .ln.is-error { background: none; }
.wq-valid .wq-squiggle { text-decoration: none; }
.wq-valid .wq-squiggle .wq-hovermsg { display: none; }
.wq-valid .wq-dirty::after { display: none; }

/* skeleton shimmer for loading state */
.wq-skel { border-radius: 8px; background: var(--glass-well); position: relative; overflow: hidden; }
.wq-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-bg) 40%, transparent), transparent); animation: wq-shimmer 1.4s infinite; }
@keyframes wq-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wq-skel::after { animation: none; } }


/* ---- Debugger: DevTools-Network-style inspector ---- */
.wq-net { border: 1px solid var(--glass-border); border-radius: var(--radius-dropdown); overflow: hidden; display: flex; flex-direction: column; }
.wq-wf-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--glass-border); font: var(--text-small); color: var(--color-secondary-text); }
.wq-wf { flex: none; max-height: 38%; display: flex; flex-direction: column; min-height: 0; }
.wq-wf-rows { padding: 8px 14px 10px; overflow: auto; min-height: 0; }
.wq-wf-row { display: flex; align-items: center; gap: 10px; height: 24px; }
.wq-wf-name { flex: none; width: 100px; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--color-secondary-text); text-align: right; overflow: hidden; text-overflow: ellipsis; }
.wq-wf-name.dim { opacity: 0.5; }
.wq-wf-track { flex: 1; position: relative; display: flex; align-items: center; min-width: 0; }
.wq-wf-bar { flex: none; height: 15px; border: 0; border-radius: 4px; cursor: pointer; font: 700 9.5px/15px var(--font-family); color: #fff; padding: 0 5px; text-align: left; overflow: hidden; white-space: nowrap; background: color-mix(in oklab, var(--qsk-accent) 75%, transparent); transition: var(--transition); }
.wq-wf-bar:hover { filter: brightness(1.12); }
.wq-wf-bar.failed { background: oklch(0.58 0.18 25 / 0.85); }
.wq-wf-bar.skipped { background: none; border: 1.5px dashed var(--glass-border); cursor: pointer; }
.wq-wf-bar.is-selected { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3.5px var(--qsk-accent); }
.wq-wf-gapnote { margin-left: 8px; font: var(--text-small); font-size: 10.5px; color: var(--color-gray-500); white-space: nowrap; }
.wq-net-split { --diagram-w: 22%; --details-w: 32%; display: flex; align-items: stretch; border-top: 1px solid var(--glass-border); min-height: 0; flex: 1; }
.wq-net-diagram { width: var(--diagram-w); min-width: 130px; max-width: 420px; flex: none; overflow: auto; }
.wq-net-left { flex: 1; min-width: 200px; overflow: auto; }
.wq-net-right { width: var(--details-w) !important; min-width: 200px; max-width: 560px; flex: none !important; }
@media (max-width: 900px) { .wq-net-split { flex-direction: column; } .wq-net-diagram, .wq-net-right { width: auto !important; max-width: none; } .wq-net-vsplit { display: none; } .wq-net-full { height: auto; } }
.wq-pane-head { padding: 8px 12px 6px; font: var(--text-small); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary-text); border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; }
.wq-net-full { border: 0; border-top: 1px solid var(--glass-border); border-radius: 0; margin: 0 -32px -32px; height: calc(100vh - 176px); min-height: 460px; }
@media (max-width: 700px) { .wq-net-full { margin: 0 -16px -20px; } }
.wq-git { padding: 8px 8px 12px; }
.wq-net-vsplit { flex: none; width: 5px; cursor: col-resize; border-left: 1px solid var(--glass-border); transition: background 0.15s; }
.wq-net-vsplit:hover, .wq-net-vsplit.dragging { background: color-mix(in oklab, var(--qsk-accent) 45%, transparent); }
.wq-net-right { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
.wq-net-tabs { display: flex; border-bottom: 1px solid var(--glass-border); }
.wq-net-tab { padding: 8px 14px; border: 0; background: none; cursor: pointer; font: var(--text-small); color: var(--color-secondary-text); transition: var(--transition); }
.wq-net-tab[aria-selected="true"] { color: var(--color-primary-text); box-shadow: inset 0 -2px 0 var(--qsk-accent); }
.wq-net-tab:hover { color: var(--color-primary-text); }
.wq-net-tabpane { flex: 1; overflow: auto; padding: 12px 14px; min-height: 0; }
.wq-steps-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wq-steps-table th { position: sticky; top: 0; text-align: left; font: var(--text-small); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary-text); padding: 8px 10px 6px; border-bottom: 1px solid var(--glass-border); background: var(--color-bg); }
.qsk-bg-blue .wq-steps-table th, [class*="qsk-bg-"] .wq-steps-table th { background: transparent; backdrop-filter: blur(8px); }
.wq-steps-table td { padding: 6px 10px; border-bottom: 1px solid var(--glass-border); }
.wq-steps-table td.kind { font: var(--text-small); color: var(--color-secondary-text); }
.wq-steprow { cursor: pointer; transition: var(--transition); }
.wq-steprow:hover { background: var(--glass-well); }
.wq-steprow.is-selected { background: color-mix(in oklab, var(--qsk-accent) 12%, transparent); }
.wq-steprow.dim td:first-child { color: var(--color-gray-500); }
.wq-io .qsa-label { margin-top: 10px; display: block; }
.wq-io pre { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 17px; background: var(--glass-well); border-radius: 8px; padding: 8px 10px; margin: 4px 0 0; overflow: auto; white-space: pre-wrap; }
/* git-style tree */
.wq-git { display: flex; flex-direction: column; }
.wq-git-row { display: flex; align-items: center; gap: 8px; height: 26px; border-radius: 6px; padding-right: 8px; cursor: default; }
.wq-git-row[data-stepid] { cursor: pointer; }
.wq-git-row[data-stepid]:hover { background: var(--glass-well); }
.wq-git-row.is-selected { background: color-mix(in oklab, var(--qsk-accent) 12%, transparent); }
.wq-git-row .rail { flex: none; width: 20px; align-self: stretch; position: relative; }
.wq-git-row.lane1 .rail { margin-left: 20px; }
.wq-git-row .rail::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--glass-border); }
.wq-git-row:first-child .rail::before { top: 50%; }
.wq-git-row:last-child .rail::before { bottom: 50%; }
.wq-git-row .dot { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-gray-500); box-sizing: border-box; }
.wq-git-row.on .dot { border-color: var(--qsk-accent); background: var(--qsk-accent); }
.wq-git-row.fail .dot { border-color: oklch(0.58 0.18 25); background: oklch(0.58 0.18 25); }
.wq-git-row.on .rail::before { background: color-mix(in oklab, var(--qsk-accent) 55%, transparent); }
/* branch lane elbow */
.wq-git-row.lane1 .rail::after { content: ''; position: absolute; left: -11px; top: -13px; width: 12px; height: 26px; border-left: 2px dashed var(--glass-border); border-bottom: 2px dashed var(--glass-border); border-bottom-left-radius: 8px; }
.wq-git-row.lane1 .rail::before { display: none; }
.wq-git-row.lane1.last .rail::after { height: 26px; }
.wq-git-row .nm { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-primary-text); flex: none; }
.wq-git-row.fail .nm { color: oklch(0.5 0.18 25); }
[data-theme="dark"] .wq-git-row.fail .nm { color: oklch(0.75 0.13 25); }
.wq-steps-table td.seq { color: var(--color-gray-500); width: 30px; }
.wq-git-row .tg { font: var(--text-small); font-size: 10.5px; color: var(--color-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }