/* =============================================================================
   ISOTOPE Hadron — Quanta Studio (#quanta)
   A sibling of the architecture estates: the root is an .nx-root, so the canvas family's tokens (status colours,
   helper-text contrast, reduced motion, [hidden]) and components (toolbar, KPI strip, chips, pills, drawer, tables,
   toasts, zoom bar) apply as they are. This sheet adds only what Quanta has of its own. Theme-aware (g100 / g90 /
   g10 / white) via Carbon tokens, 8px grid, container-driven responsiveness down to 320px.
   ============================================================================= */

.qs-root {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 520px;
  /* Node groups: the canvas family's kind hues, from the shared Carbon palette tokens (--hx-<hue>-<grade>, NETEXP's
     request to SHARED; the grade is kept here until they land): 40/50 grades on dark themes, 60/70 on light ones. */
  --qs-grp-source: var(--hx-blue-50); --qs-grp-analyze: var(--hx-teal-40); --qs-grp-llm: var(--hx-magenta-50);
  --qs-grp-control: var(--hx-purple-50); --qs-grp-code: var(--hx-teal-30); --qs-grp-output: var(--hx-green-30);
  --qs-tone-ok: var(--nx-ok); --qs-tone-err: var(--nx-err); --qs-tone-warn: var(--nx-warn); --qs-tone-info: var(--nx-info); --qs-tone-idle: var(--hx-status-unknown);
  /* Diffs: the shared added / removed scale (tokens.css --hx-diff-*), as Secant and Fluidics draw theirs. */
  --qs-add-bg: var(--hx-diff-add-bg); --qs-del-bg: var(--hx-diff-del-bg);
  --qs-add-ln: color-mix(in srgb, var(--hx-diff-add-bg) 55%, transparent); --qs-del-ln: color-mix(in srgb, var(--hx-diff-del-bg) 55%, transparent);
  --qs-edge: var(--hx-status-unknown);
  /* Syntax: the shared code scale when tokens.css has it (--hx-code-*), else the Carbon grades it names. */
  --qs-tk-kw: var(--hx-code-kw); --qs-tk-str: var(--hx-code-str); --qs-tk-cm: var(--hx-code-cm);
  --qs-tk-num: var(--hx-code-num); --qs-tk-meta: var(--hx-code-meta); --qs-tk-key: var(--hx-code-key);
}
[data-carbon-theme="g10"] .qs-root, [data-carbon-theme="white"] .qs-root {
  --qs-grp-source: var(--cds-interactive); --qs-grp-analyze: var(--hx-teal-60); --qs-grp-llm: var(--hx-magenta-60);
  --qs-grp-control: var(--hx-purple-60); --qs-grp-code: var(--hx-cyan-70); --qs-grp-output: var(--hx-green-60);
  --qs-tone-info: var(--hx-sev-info); --qs-tone-warn: var(--hx-status-degraded);
  --qs-tk-kw: var(--hx-code-kw); --qs-tk-str: var(--hx-code-str); --qs-tk-cm: var(--hx-code-cm);
  --qs-tk-num: var(--hx-code-num); --qs-tk-meta: var(--hx-code-meta); --qs-tk-key: var(--hx-code-key);
}
/* scoped to the studio: .grp-* and .tone-* are generic names other views also use (P2 polish: no global class collisions) */
:is(.qs-root, .qs-dialog-backdrop) .grp-source { --k: var(--qs-grp-source); } :is(.qs-root, .qs-dialog-backdrop) .grp-analyze { --k: var(--qs-grp-analyze); }
:is(.qs-root, .qs-dialog-backdrop) .grp-llm { --k: var(--qs-grp-llm); } :is(.qs-root, .qs-dialog-backdrop) .grp-control { --k: var(--qs-grp-control); }
:is(.qs-root, .qs-dialog-backdrop) .grp-code { --k: var(--qs-grp-code); } :is(.qs-root, .qs-dialog-backdrop) .grp-output { --k: var(--qs-grp-output); }

/* ---------------------------------------------------------------- Toolbar & navigation */
.qs-toolbar { flex-wrap: wrap; }
.qs-app-icon { color: var(--cds-link-primary); }
.qs-screen-sub { display: block; max-width: 420px; font-size: var(--cds-label-01); line-height: 16px; color: var(--cds-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-screen-sub:empty { display: none; }
@container nx (max-width: 671px) { .qs-screen-sub { display: none; } }
.qs-screen-title { font-size: var(--f-title); line-height: 24px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.qs-nav ul { list-style: none; margin: 0; padding: var(--cds-spacing-01); display: flex; gap: var(--cds-spacing-01); border-radius: 0; background: var(--cds-layer-02); }
.qs-nav-link {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-02); height: 28px; padding: 0 var(--cds-spacing-04); border-radius: 0;
  color: var(--cds-text-secondary); text-decoration: none; font: 500 var(--f-sm)/28px var(--cds-font-sans, sans-serif); white-space: nowrap;
}
.qs-nav-link.is-active { background: var(--cds-layer-01); color: var(--cds-text-primary); box-shadow: var(--hx-shadow-sm); }
.qs-nav-link .nx-count { min-width: 18px; height: 16px; line-height: 16px; background: var(--nx-warn); color: var(--hx-sev-low-on); }
.qs-actions { flex-wrap: wrap; justify-content: flex-end; }
/* The shortcuts button stays beside the actions when the toolbar wraps (never alone on a line of its own). */
/* X4-001: wraps (never overlaps) when the actions, the model link and the shortcuts button do not fit one row at 320 px */
.qs-tb-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03); min-width: 0; max-width: 100%; margin-left: auto; }
.qs-models-link { white-space: nowrap; }
.qs-actions .nx-btn[disabled], .qs-actions .nx-icon-btn[disabled], .qs-root .nx-btn[disabled] { opacity: .45; cursor: not-allowed; }
.qs-actions .nx-btn.is-dirty { box-shadow: inset 0 -2px 0 var(--nx-warn); }
.qs-btn-danger { color: var(--nx-err); border-color: color-mix(in srgb, var(--nx-err) 60%, var(--cds-border-strong-01)); }
.qs-btn-danger:hover { background: color-mix(in srgb, var(--nx-err) 12%, transparent); }
.qs-btn-danger-fill { background: var(--cds-button-danger-primary, var(--hx-sev-critical)); border-color: transparent; color: var(--cds-text-on-color); }
.qs-btn-danger-fill:hover { background: var(--cds-button-danger-hover); }
:is(.qs-root, .qs-dialog-backdrop) a.nx-btn { text-decoration: none; }

/* ---------------------------------------------------------------- Body & pages */
.qs-body { position: relative; min-height: 0; overflow: auto; outline: none; }
.qs-root[data-screen="editor"] .qs-body, .qs-root[data-screen="run"] .qs-body { overflow: hidden; display: flex; flex-direction: column; }
.qs-page { padding: 0 0 var(--cds-spacing-07); }
.qs-kpis { flex-wrap: wrap; }
.qs-kpis .nx-kpi { min-width: 160px; }
.qs-kpis .nx-kpi[data-tone="err"] .nx-kpi-value { color: var(--nx-err); }
.qs-kpis .nx-kpi[data-kpi="items"] .nx-kpi-value small { margin-inline: var(--cds-spacing-02); }   /* "3 / 5": the network unit style pulls a trailing unit left; a separator needs room on both sides */
.qs-skel-val { display: inline-block; width: 56px; height: 22px; border-radius: 0; background: var(--cds-skeleton-base); animation: nx-fade var(--cds-motion-heartbeat) ease-in-out infinite alternate; }
.qs-panel { margin: var(--cds-spacing-05) var(--cds-spacing-05) 0; background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); border-radius: 0; min-width: 0; }
.qs-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-05); padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); }
.qs-panel-body > .qs-panel-head { border-bottom: 0; padding-bottom: var(--cds-spacing-02); }
.qs-panel-sub { flex-basis: 100%; margin: 0; font-size: var(--f-ms); line-height: 20px; color: var(--cds-text-secondary); max-width: 960px; }
.qs-h2 { margin: 0; font-size: var(--cds-heading-02); line-height: 22px; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.qs-home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; }
.qs-home-grid .qs-panel + .qs-panel { margin-left: 0; }
.qs-home-grid .qs-panel:first-child { margin-right: var(--cds-spacing-05); }
.qs-notice {
  display: flex; align-items: flex-start; gap: var(--hx-space-10); margin: var(--cds-spacing-04) var(--cds-spacing-05) 0; padding: var(--hx-space-10) var(--cds-spacing-04); font-size: var(--f-ms); line-height: 20px;
  background: color-mix(in srgb, var(--nx-info) 10%, var(--cds-layer-01)); border-left: 3px solid var(--nx-info); border-radius: 0;
}
.qs-notice .nx-i { margin-top: var(--cds-spacing-01); color: var(--nx-info); }
.qs-notice.is-warn { background: color-mix(in srgb, var(--nx-warn) 10%, var(--cds-layer-01)); border-left-color: var(--nx-warn); }
.qs-notice.is-warn .nx-i { color: var(--nx-warn-text); }
.qs-notice b { margin-right: var(--hx-space-6); }
.qs-notice.is-err { background: color-mix(in srgb, var(--nx-err) 10%, var(--cds-layer-01)); border-left-color: var(--nx-err); }
.qs-notice.is-err .nx-i { color: var(--nx-err); }
.qs-failed-help .qs-prose + .qs-prose { margin-top: var(--cds-spacing-03); }
.qs-next { display: block; margin-top: var(--cds-spacing-01); color: var(--cds-text-secondary); }
.qs-count { margin: 0 var(--cds-spacing-05) var(--cds-spacing-03); font-size: var(--cds-label-01); color: var(--cds-text-secondary); }
.qs-unknown-time { color: var(--cds-text-helper); }
/* I9: a sortable column header is a 24 px target (the shared .nx-th-sort is 18 px tall). */
.qs-table .nx-th-sort { min-height: 24px; }
.qs-read-at { font-size: var(--cds-label-01); color: var(--cds-text-secondary); white-space: nowrap; }
.qs-kpi-link { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.qs-cell-why { color: var(--nx-err); font-weight: var(--fw-regular); }

/* Empty, loading and error states: the canvas family's message block, in flow. */
/* The shared state blocks (HadronState, states.css) sit in Quanta's panels with its spacing; the rest is theirs. */
.qs-msg.hd-state { margin: var(--cds-spacing-05); }
.qs-panel-body .qs-msg.hd-state { margin: var(--cds-spacing-04) var(--cds-spacing-05); }
.qs-msg.hd-state .nx-empty-actions { display: contents; }
.qs-msg.hd-state .nx-retry-note { flex-basis: 100%; margin: 0; }
.qs-msg:not(.hd-state) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cds-spacing-04); padding: var(--cds-spacing-09) var(--cds-spacing-05); text-align: center; color: var(--cds-text-secondary); font-size: var(--f-ms); }
.qs-msg:not(.hd-state) h3 { margin: 0; font-size: var(--f-xl); font-weight: var(--fw-regular); color: var(--cds-text-primary); }
.qs-msg:not(.hd-state) p { margin: 0; max-width: 560px; line-height: 20px; }
.qs-msg.is-error .nx-empty-icon { color: var(--nx-err); }
.qs-msg .nx-retry-note { font-size: var(--cds-label-01); color: var(--cds-text-helper); }
.qs-panel-body .qs-msg:not(.hd-state) { padding: var(--cds-spacing-07) var(--cds-spacing-05); }
.qs-inline-err { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; color: var(--cds-text-primary); }

/* Status pills: tone colour + shape glyph + words (WCAG 1.4.1). */
.qs-status {
  display: inline-flex; align-items: center; gap: var(--hx-space-6); height: 20px; padding: 0 var(--cds-spacing-03); border-radius: var(--hx-radius-chip); white-space: nowrap;
  font-size: var(--f-xs); font-weight: var(--fw-medium); color: var(--cds-text-primary); background: color-mix(in srgb, var(--t) 18%, transparent);
}
.qs-status .qs-glyph { fill: var(--t); color: var(--t); flex-shrink: 0; }
:is(.qs-root, .qs-dialog-backdrop) .tone-ok { --t: var(--qs-tone-ok); } :is(.qs-root, .qs-dialog-backdrop) .tone-err { --t: var(--qs-tone-err); }
:is(.qs-root, .qs-dialog-backdrop) .tone-warn { --t: var(--qs-tone-warn); } :is(.qs-root, .qs-dialog-backdrop) .tone-info { --t: var(--qs-tone-info); }
:is(.qs-root, .qs-dialog-backdrop) .tone-idle { --t: var(--qs-tone-idle); }
.qs-status.is-large { height: 26px; padding: 0 var(--hx-space-10); font-size: var(--cds-body-01); border-radius: var(--hx-radius-lg); }
/* Added / removed line counts: text colours that keep 4.5:1 on every layer (the status hues are for marks, not text). */
.qs-root, .qs-dialog-backdrop { --qs-add-text: var(--hx-diff-add-text); --qs-del-text: var(--hx-diff-del-text); }
.qs-add { color: var(--qs-add-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.qs-del { color: var(--qs-del-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; margin-left: var(--hx-space-6); }
.qs-fail-n { color: var(--nx-err); font-weight: var(--fw-semibold); }
.qs-prose { margin: 0; font-size: var(--f-ms); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.qs-warn-text { color: var(--nx-warn-text); }

/* ---------------------------------------------------------------- Templates gallery */
.qs-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--cds-spacing-04); padding: var(--cds-spacing-05); }
.qs-tpl {
  display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05); min-width: 0;
  background: var(--cds-layer-02); border: 1px solid transparent; border-radius: 0;
  transition: border-color var(--cds-fast-02) var(--nx-ease), background var(--cds-fast-02) var(--nx-ease);
}
[data-carbon-theme="g10"] .qs-tpl, [data-carbon-theme="white"] .qs-tpl { background: var(--cds-layer-02); }
.qs-tpl:hover { border-color: var(--cds-border-strong-01); }
.qs-tpl:focus-within { border-color: var(--cds-focus); }
.qs-tpl-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-03); flex-wrap: wrap; }
.qs-tpl-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 0; background: color-mix(in srgb, var(--cds-interactive) 18%, transparent); color: var(--cds-link-primary); }
.qs-tpl-name { margin: var(--cds-spacing-02) 0 0; font-size: var(--cds-heading-02); line-height: 22px; font-weight: var(--fw-semibold); }
.qs-tpl-desc { margin: 0; font-size: var(--f-ms); line-height: 20px; color: var(--cds-text-secondary); flex: 1; }
.qs-flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-02); margin-top: var(--cds-spacing-02); }
.qs-flow-step { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 0; color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); }
.qs-flow-arrow { width: 8px; height: 1px; background: var(--cds-border-strong-01); }
.qs-tpl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-02); margin-top: var(--cds-spacing-03); }
.qs-tpl-foot .nx-chip { margin: 0; font-family: var(--cds-font-sans, sans-serif); }

/* ---------------------------------------------------------------- Tables & lists */
.qs-table-wrap { max-width: 100%; }
.qs-table td { vertical-align: middle; }
.qs-table tr[data-open]:focus-visible td, .qs-vt-row:focus-visible td { outline: none; background: var(--cds-layer-selected-01); box-shadow: inset 0 2px 0 var(--cds-focus), inset 0 -2px 0 var(--cds-focus); }
.qs-table tr[data-open]:focus-visible td:first-child, .qs-vt-row:focus-visible td:first-child { box-shadow: inset 2px 2px 0 var(--cds-focus), inset 0 -2px 0 var(--cds-focus); }
.qs-table:not(:has(tr[data-open])) tbody tr { cursor: default; }
.qs-cell-strong { display: inline-flex; align-items: center; gap: var(--hx-space-6); font-weight: var(--fw-semibold); font-size: var(--f-ms); overflow-wrap: anywhere; }
.qs-cell-sub { display: block; margin-top: var(--cds-spacing-01); font-size: var(--f-xs); line-height: 16px; color: var(--cds-text-helper); overflow-wrap: anywhere; }
.qs-row-actions { white-space: nowrap; text-align: right; }
.qs-row-actions .nx-btn { margin-left: var(--cds-spacing-02); }
.qs-mono-link { font-family: var(--cds-font-mono, monospace); font-size: var(--cds-label-01); }
/* Archived rows read as secondary by their weight and an "Archived" pill, not by fading (faded text fails contrast). */
tr.is-archived .qs-cell-strong { font-weight: var(--fw-regular); color: var(--cds-text-secondary); }
tr.is-archived .nx-pill { color: var(--cds-text-primary); }
.qs-pipe-list { list-style: none; margin: 0; padding: var(--cds-spacing-03) 0; }
.qs-pipe { display: block; padding: var(--cds-spacing-03) var(--cds-spacing-05); color: var(--cds-text-primary); text-decoration: none; border-left: 3px solid transparent; }
.qs-pipe:hover { background: var(--cds-layer-hover-01); border-left-color: var(--cds-interactive); }
.qs-tabs { display: flex; height: 40px; margin: var(--cds-spacing-04) var(--cds-spacing-05) 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
.qs-tabs .nx-tab.is-active, .qs-ed-tabs .nx-tab.is-active { color: var(--cds-text-primary); }
.qs-tabs + .qs-panel { margin-top: 0; border-top: 0; border-radius: 0; }

/* ---------------------------------------------------------------- Editor */
.qs-editor { display: grid; grid-template-columns: 264px minmax(0, 1fr); flex: 1; min-height: 0; }
.qs-palette { display: flex; flex-direction: column; min-height: 0; background: var(--cds-layer-01); border-right: 1px solid var(--cds-border-subtle-01); }
.qs-pal-head { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-04) var(--cds-spacing-02); }
.qs-pal-title { display: flex; align-items: center; gap: var(--cds-spacing-03); margin: 0; font-size: var(--cds-body-01); font-weight: var(--fw-semibold); }
.qs-pal-search { height: 32px; }
.qs-pal-hint { margin: 0; padding: 0 var(--cds-spacing-04) var(--cds-spacing-03); font-size: var(--f-xs); color: var(--cds-text-helper); }
.qs-pal-list { flex: 1; overflow-y: auto; padding: 0 var(--cds-spacing-03) var(--cds-spacing-05); }
.qs-pal-group ul { list-style: none; margin: 0; padding: 0; }
.qs-pal-gh { display: flex; align-items: center; gap: var(--cds-spacing-03); margin: var(--cds-spacing-04) var(--cds-spacing-02) var(--cds-spacing-02); font-size: var(--f-xs); font-weight: var(--fw-semibold); letter-spacing: .32px; color: var(--cds-text-secondary); }
.qs-pal-gh .nx-i { color: var(--k); }
.qs-pal-gh .nx-count { margin-left: auto; }
.qs-pal-item {
  display: flex; align-items: center; gap: var(--hx-space-10); width: 100%; padding: var(--hx-space-6) var(--cds-spacing-03); margin: 1px 0; border: 0; border-radius: 0; cursor: grab;
  background: transparent; color: var(--cds-text-primary); text-align: left; font: inherit; box-shadow: inset 2px 0 0 var(--k);
}
.qs-pal-item:hover { background: var(--cds-layer-hover-01); }
.qs-pal-item:active { cursor: grabbing; }
.qs-pal-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 0; flex-shrink: 0; color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); }
.qs-pal-text { display: flex; flex-direction: column; min-width: 0; }
.qs-pal-name { font-size: var(--f-ms); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-pal-type { font: var(--f-xs) var(--cds-font-mono, monospace); color: var(--cds-text-helper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-pal-none { padding: var(--cds-spacing-04) var(--cds-spacing-02); }
.qs-pal-toggle { display: none; }

.qs-ed-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.qs-ed-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-04); padding: var(--cds-spacing-03) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); }
.qs-name-input {
  flex: 1 1 240px; min-width: 0; max-width: 560px; height: 36px; padding: 0 var(--cds-spacing-03); border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--cds-text-primary); font: 400 var(--f-xl)/36px var(--cds-font-sans, sans-serif);
}
.qs-name-input:hover { border-bottom-color: var(--cds-border-strong-01); }
.qs-name-input:focus { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); background: var(--cds-field-01); }
.qs-ed-state { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-6); }
.qs-ed-state .nx-chip { margin: 0; }
.qs-editor .qs-notice { margin: var(--cds-spacing-03) var(--cds-spacing-05) 0; }
.qs-ed-tabs { display: flex; align-items: center; height: 40px; min-height: 40px; padding: 0 var(--cds-spacing-03) 0 0; border-bottom: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
.qs-ed-tabs .nx-tab .nx-i { margin-right: var(--cds-spacing-01); }
.qs-ed-tablist { display: flex; align-items: stretch; height: 100%; }
.qs-dlg-body:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.qs-ed-panel { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qs-canvas-host { position: relative; flex: 1; min-height: 0; display: flex; }

/* Canvas */
.qs-stage {
  position: relative; flex: 1; min-height: 240px; overflow: hidden; outline: none; touch-action: none; cursor: default;
  background-color: var(--cds-background);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cds-border-strong-01) 55%, transparent) 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.qs-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--cds-focus); }
.qs-stage.is-panning { cursor: grabbing; }
.qs-stage.is-drop { box-shadow: inset 0 0 0 2px var(--cds-interactive); }
.qs-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.qs-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.qs-edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.qs-stage.is-readonly .qs-edge-hit { pointer-events: none; }
.qs-edge { fill: none; stroke: var(--qs-edge); stroke-width: 2; pointer-events: none; }
.qs-edge.is-flowed { stroke: color-mix(in srgb, var(--nx-ok) 70%, var(--qs-edge)); }
.qs-edge.is-active { stroke: var(--qs-tone-info); stroke-dasharray: 6 4; animation: qs-flow var(--cds-motion-blink) linear infinite; }
@keyframes qs-flow { to { stroke-dashoffset: -20; } }
.qs-edge.is-selected { stroke: var(--cds-interactive); stroke-width: 3; }
.qs-wire { fill: none; stroke: var(--cds-interactive); stroke-width: 2; stroke-dasharray: 5 4; }
.qs-nodes { position: absolute; left: 0; top: 0; }
.qs-node {
  position: absolute; width: 232px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-auto-rows: min-content; align-content: center;
  column-gap: var(--hx-space-10); row-gap: var(--cds-spacing-02); padding: var(--hx-space-10) var(--cds-spacing-04); cursor: pointer; user-select: none;
  background: var(--nx-card-bg); border: 1px solid var(--cds-border-subtle-02); border-radius: 0;
  box-shadow: var(--hx-shadow-sm); color: var(--cds-text-primary);
}
.qs-node::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0; background: var(--k); }
.qs-node:hover { border-color: var(--cds-border-strong-01); }
.qs-node:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-offset); }
.qs-node.is-selected { border-color: var(--cds-border-interactive); box-shadow: inset 0 0 0 1px var(--cds-border-interactive), var(--hx-shadow-md); }
.qs-node.is-dragging { opacity: .85; cursor: grabbing; z-index: var(--hx-z-2); }
.qs-node.is-pending { border-color: var(--cds-interactive); border-style: dashed; }
.qs-node.is-unknown { border-style: dashed; }
.qs-node.has-errors { border-color: color-mix(in srgb, var(--nx-err) 70%, var(--cds-border-subtle-02)); }
.qs-node.st-ok { border-color: color-mix(in srgb, var(--qs-tone-ok) 70%, transparent); }
.qs-node.st-err { border-color: var(--qs-tone-err); box-shadow: inset 0 0 0 1px var(--qs-tone-err); }
.qs-node.st-ok, .qs-node.st-err, .qs-node.st-warn, .qs-node.st-info, .qs-node.st-idle { color: var(--cds-text-primary); font-size: inherit; }
.qs-node.st-warn { border-color: var(--qs-tone-warn); box-shadow: inset 0 0 0 1px var(--qs-tone-warn); }
.qs-node.st-info { border-color: var(--qs-tone-info); }
.qs-node.st-idle { opacity: .8; }
.qs-node-icon { grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; align-self: start; border-radius: 0; color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); }
.qs-node-text { display: flex; flex-direction: column; min-width: 0; }
.qs-node-name { font-size: var(--cds-body-01); line-height: 18px; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-node-type { font: var(--f-xs)/16px var(--cds-font-mono, monospace); color: var(--cds-text-helper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-node-err { display: inline-flex; align-items: center; gap: var(--cds-spacing-01); align-self: start; font-size: var(--f-xs); font-weight: var(--fw-semibold); color: var(--nx-err); }
.qs-node-status { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--hx-space-6); min-width: 0; }
.qs-node-status .qs-status { height: 18px; padding: 0 var(--hx-space-6); font-size: var(--f-xs); }
.qs-node-count { font-size: var(--f-xs); color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qs-prog { grid-column: 2 / -1; height: 4px; border-radius: 0; background: var(--cds-layer-accent-01); overflow: hidden; }
[data-carbon-theme="g10"] .qs-prog, [data-carbon-theme="white"] .qs-prog { background: var(--cds-layer-accent-01); }
.qs-prog span { display: block; height: 100%; background: var(--t, var(--qs-tone-info)); transition: width var(--cds-moderate-02) var(--nx-ease); }
.qs-node.st-ok .qs-prog span { background: var(--qs-tone-ok); } .qs-node.st-err .qs-prog span { background: var(--qs-tone-err); } .qs-node.st-warn .qs-prog span { background: var(--qs-tone-warn); }
.qs-port { position: absolute; width: 14px; height: 14px; display: grid; place-items: center; cursor: crosshair; z-index: var(--cds-z-surface); }
.qs-port-in { left: -8px; }
.qs-port-out { right: -8px; }
.qs-port i { width: 10px; height: 10px; border-radius: var(--hx-radius-round); background: var(--cds-layer-01); border: 2px solid var(--cds-icon-secondary); transition: transform var(--cds-fast-02) var(--nx-ease); }
.qs-port:hover i, .qs-port.is-target i { transform: scale(1.35); border-color: var(--cds-interactive); background: var(--cds-interactive); }
.qs-port em { position: absolute; top: -18px; font: var(--f-xs)/14px var(--cds-font-mono, monospace); font-style: normal; color: var(--cds-text-helper); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--cds-fast-02); }
.qs-port-in em { left: 0; } .qs-port-out em { right: 0; }
.qs-node:hover .qs-port em, .qs-stage.is-connecting .qs-port-in em { opacity: 1; }
.qs-stage.is-connecting .qs-port-in i { border-color: var(--cds-interactive); }
.qs-stage.is-readonly .qs-port { cursor: default; pointer-events: none; }
.qs-stage.is-readonly .qs-port i { width: 8px; height: 8px; border-width: 1.5px; }
.qs-stage-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.qs-stage-empty .qs-msg { max-width: 420px; }
.qs-zoombar { right: 16px; bottom: 12px; }
.qs-ed-panel.has-drawer .qs-zoombar { right: calc(min(420px, 40%) + 16px); }
.qs-legend {
  position: absolute; z-index: var(--cds-z-docked); left: 16px; bottom: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-6) var(--cds-spacing-03); padding: var(--hx-space-6) var(--hx-space-10); max-width: calc(100% - 220px);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); border-radius: 0; box-shadow: var(--hx-shadow-sm);
}

/* Inspector drawer (the canvas's drawer) */
.qs-inspector { z-index: var(--cds-z-table-header); }
.qs-inspector h3[tabindex="-1"]:focus, #qs-log-title:focus { outline: none; }
.qs-inspector h3[tabindex="-1"]:focus-visible, #qs-log-title:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-offset); }
.qs-conn-list { list-style: none; margin: var(--cds-spacing-04) 0 var(--cds-spacing-03); padding: 0; }
.qs-conn-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-03); padding: var(--cds-spacing-01) 0 var(--cds-spacing-01) var(--cds-spacing-03); font: var(--cds-label-01) var(--cds-font-mono, monospace); border-left: 2px solid var(--cds-border-subtle-02); }
.qs-conn-row .nx-icon-btn { width: 28px; height: 28px; }
.qs-inspector .nx-dl .nx-chip { margin: 0 var(--cds-spacing-02) var(--cds-spacing-02) 0; }

/* Forms */
.qs-form { display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.qs-field { display: flex; flex-direction: column; gap: var(--hx-space-6); min-width: 0; margin: 0; }
.qs-grow { flex: 1 1 240px; }
.qs-fieldset { border: 0; padding: 0; }
.qs-label { font-size: var(--cds-label-01); line-height: 16px; letter-spacing: .32px; color: var(--cds-text-secondary); padding: 0; }
.qs-req { color: var(--nx-err); }
.qs-input {
  width: 100%; min-height: 36px; padding: 0 var(--cds-spacing-04); border: 0; border-bottom: 1px solid var(--cds-border-strong-01); border-radius: 0;
  background: var(--cds-field-02); color: var(--cds-text-primary); font: 400 var(--f-ms)/20px var(--cds-font-sans, sans-serif);
}
.qs-palette .qs-input, .qs-dialog .qs-input { background: var(--cds-field-01); }
[data-carbon-theme="g10"] .qs-input, [data-carbon-theme="white"] .qs-input { background: var(--cds-field-01); }
.qs-input::placeholder { color: var(--cds-text-placeholder); }
.qs-input:focus { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.qs-textarea { padding: var(--cds-spacing-03) var(--cds-spacing-04); resize: vertical; min-height: 64px; line-height: 20px; }
.qs-mono { font-family: var(--cds-font-mono, monospace); font-size: var(--cds-label-01); }
.qs-select { width: 100%; max-width: none; min-width: 0; }
.qs-help { font-size: var(--cds-label-01); line-height: 16px; color: var(--cds-text-helper); }
.qs-err { margin: 0; font-size: var(--cds-label-01); line-height: 16px; color: var(--nx-err); }
.qs-field.is-invalid .qs-input, .qs-field.is-invalid .qs-select, .qs-input[aria-invalid="true"] { outline: var(--hx-focus-ring-width) solid var(--nx-err); outline-offset: var(--hx-focus-ring-inset); }
.qs-checks { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-01) var(--cds-spacing-03); }
.qs-check { padding: var(--cds-spacing-02) var(--cds-spacing-03) var(--cds-spacing-02) 0; }
.qs-check-field .qs-help, .qs-check-field .qs-err { margin-left: var(--cds-spacing-06); }
.qs-listbox { width: 100%; padding: var(--cds-spacing-02) 0; border: 1px solid var(--cds-border-strong-01); background: var(--cds-field-01); color: var(--cds-text-primary); font: var(--f-ms)/24px var(--cds-font-sans, sans-serif); }
.qs-listbox:focus { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.qs-listbox option { padding: var(--cds-spacing-02) var(--cds-spacing-04); white-space: pre; }

/* Problems & YAML */
.qs-problems { max-height: 30%; overflow: auto; padding: var(--cds-spacing-03) var(--cds-spacing-05) var(--hx-space-10); border-top: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); flex-shrink: 0; }
.qs-prob-h { display: flex; align-items: center; gap: var(--cds-spacing-03); margin: 0; font-size: var(--cds-label-01); font-weight: var(--fw-semibold); letter-spacing: .32px; color: var(--cds-text-secondary); }
.qs-prob-h .nx-i { color: var(--nx-ok); }
.qs-prob-list { list-style: none; margin: var(--hx-space-6) 0 0; padding: 0; font-size: var(--f-ms); line-height: 20px; }
.qs-prob-list li { padding: var(--cds-spacing-01) 0 var(--cds-spacing-01) var(--hx-space-10); border-left: 2px solid var(--nx-err); margin-bottom: var(--cds-spacing-01); overflow-wrap: anywhere; }
.qs-problems:has(.qs-prob-list) .qs-prob-h .nx-i { color: var(--nx-err); }
.qs-yaml { padding: var(--cds-spacing-04) var(--cds-spacing-05); gap: var(--cds-spacing-03); }
.qs-yaml-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03); }
.qs-yaml-text { flex: 1; min-height: 240px; resize: none; white-space: pre; overflow: auto; tab-size: 2; }

/* ---------------------------------------------------------------- Run view */
.qs-run { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qs-kpi-status { align-items: center; }
.qs-mini-prog { display: inline-block; width: 64px; height: 4px; margin-right: var(--hx-space-6); vertical-align: 2px; border-radius: 0; background: var(--cds-layer-accent-01); overflow: hidden; }
.qs-mini-prog span { display: block; height: 100%; background: var(--qs-tone-ok); }
.qs-run-live { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-6) var(--cds-spacing-04); min-height: 28px; padding: var(--cds-spacing-02) var(--cds-spacing-05); font-size: var(--cds-label-01); color: var(--cds-text-secondary); border-bottom: 1px solid var(--cds-border-subtle-01); }
.qs-run-live > span:not(.qs-live-dot) { display: inline-flex; align-items: center; gap: var(--hx-space-6); }
.qs-live-dot { width: 8px; height: 8px; border-radius: var(--hx-radius-round); background: var(--nx-ok); flex-shrink: 0; }
.qs-live-dot.is-wait { background: transparent; border: 1.5px solid var(--nx-info); }
.qs-run-live[data-live="retrying"] { color: var(--nx-warn-text); }
.qs-run-err { color: var(--nx-err); }
.qs-run-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; flex: 1 1 55%; min-height: 220px; }
.qs-run-dag { position: relative; display: flex; min-width: 0; min-height: 0; }
.qs-tput { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); background: var(--cds-layer-01); border-left: 1px solid var(--cds-border-subtle-01); overflow: auto; }
.qs-tput-h { display: flex; align-items: center; gap: var(--cds-spacing-03); margin: 0; font-size: var(--cds-label-01); font-weight: var(--fw-semibold); letter-spacing: .32px; color: var(--cds-text-secondary); }
.qs-tput-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-04); margin: 0; }
.qs-tput-grid dt { font-size: var(--cds-label-01); color: var(--cds-text-secondary); }
.qs-tput-grid dd { margin: var(--cds-spacing-01) 0 0; }
.qs-tput-grid b { font-size: var(--f-figure); line-height: 30px; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.qs-tput-grid small { font-size: var(--f-ms); color: var(--cds-text-secondary); }
.qs-tput-wide { grid-column: 1 / -1; }
.qs-slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--cds-spacing-01); margin-top: var(--hx-space-6); }
.qs-slot { height: 10px; border-radius: 0; background: var(--cds-layer-accent-01); box-shadow: inset 0 0 0 1px var(--cds-border-subtle-02); }
.qs-slot.is-busy { background: var(--qs-grp-llm); box-shadow: none; }
.qs-spark { width: 100%; height: 42px; }
.qs-spark polyline { fill: none; stroke: var(--qs-tone-info); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.qs-spark-cap { margin: 0; font-size: var(--f-xs); color: var(--cds-text-helper); }
.qs-items { flex: 1 1 45%; min-height: 200px; }
.qs-items-bar { flex-wrap: wrap; height: auto; min-height: 40px; padding: var(--cds-spacing-02) var(--cds-spacing-03) var(--cds-spacing-02) var(--cds-spacing-05); row-gap: var(--cds-spacing-02); }
.qs-items-h { margin: 0; font-size: var(--cds-body-01); font-weight: var(--fw-semibold); }
.qs-items-bar .nx-filter-chips { flex-wrap: wrap; }
.qs-vt { flex: 1; overflow: auto; min-height: 0; outline: none; }
.qs-vt-table { table-layout: fixed; }
.qs-vt-table th { height: 40px; }
.qs-vt-row td { height: 40px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-vt-row.is-loading td { padding: 0 var(--cds-spacing-05); }
.qs-skel-inline { display: block; height: 20px; margin: 0; }
.qs-vt-pad td { padding: 0; border: 0; }
.qs-c-st { width: 190px; } .qs-c-file { width: 26%; } .qs-c-node { width: 150px; } .qs-c-att { width: 96px; } .qs-c-upd { width: 110px; }
.qs-cell-title, .qs-cell-file, .qs-cell-node { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-log-drawer { z-index: var(--hx-z-30); }
.qs-logs { list-style: none; margin: 0; padding: var(--cds-spacing-03); max-height: 360px; overflow: auto; font: var(--cds-label-01)/18px var(--cds-font-mono, monospace); background: var(--cds-field-01); border: 1px solid var(--cds-border-subtle-01); }
.qs-logs li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--cds-spacing-03); padding: 1px 0; }
.qs-logs time { color: var(--cds-text-helper); }
.qs-lv { font-size: var(--f-xs); font-weight: var(--fw-semibold); color: var(--cds-text-secondary); }
.qs-lmsg { white-space: pre-wrap; overflow-wrap: anywhere; }
.qs-logs .lv-erro .qs-lv { color: var(--nx-err); } .qs-logs .lv-warn .qs-lv { color: var(--nx-warn-text); }
.qs-pre { margin: 0; max-height: 280px; overflow: auto; padding: var(--cds-spacing-03) var(--hx-space-10); font: var(--cds-label-01)/18px var(--cds-font-mono, monospace); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cds-field-01); border: 1px solid var(--cds-border-subtle-01); border-radius: 0; }
.qs-pre.is-err { border-left: 3px solid var(--nx-err); }
.qs-pre:focus-visible, .qs-logs:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.qs-cmd { margin: 0 0 var(--hx-space-6); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Review */
.qs-review { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 0; margin: var(--cds-spacing-05); border: 1px solid var(--cds-border-subtle-01); border-radius: 0; background: var(--cds-layer-01); min-width: 0; }
.qs-files { position: sticky; top: 0; max-height: calc(100vh - 220px); overflow: auto; border-right: 1px solid var(--cds-border-subtle-01); }
.qs-files ul { list-style: none; margin: 0; padding: var(--cds-spacing-02) 0; }
.qs-file { display: flex; flex-direction: column; gap: var(--cds-spacing-02); width: 100%; padding: var(--cds-spacing-03) var(--cds-spacing-04); border: 0; border-left: 3px solid transparent; background: none; cursor: pointer; text-align: left; color: var(--cds-text-primary); font: inherit; }
.qs-file:hover { background: var(--cds-layer-hover-01); }
.qs-file.is-current { border-left-color: var(--cds-interactive); background: var(--cds-layer-selected-01); }
.qs-file:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.qs-file-path { font: var(--cds-label-01)/18px var(--cds-font-mono, monospace); overflow-wrap: anywhere; }
.qs-file-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-6); font-size: var(--f-xs); }
.qs-file-meta .qs-del { margin-left: 0; }
.qs-file-panel { min-width: 0; padding: 0 0 var(--cds-spacing-05); }
.qs-file-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-04); padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); }
.qs-file-head .qs-h2 { font-family: var(--cds-font-mono, monospace); font-size: var(--cds-body-01); flex: 1 1 240px; min-width: 0; }
.qs-badges { display: inline-flex; gap: var(--hx-space-6); flex-wrap: wrap; }
.qs-ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--cds-spacing-04); padding: var(--cds-spacing-04) var(--cds-spacing-05) 0; }
.qs-ctx-card { min-width: 0; padding: var(--cds-spacing-04); background: var(--cds-layer-02); border-radius: 0; display: flex; flex-direction: column; gap: var(--cds-spacing-03); }
[data-carbon-theme="g10"] .qs-ctx-card, [data-carbon-theme="white"] .qs-ctx-card { background: var(--cds-layer-02); }
.qs-ctx-card h4 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03); margin: 0; font-size: var(--cds-label-01); font-weight: var(--fw-semibold); letter-spacing: .32px; color: var(--cds-text-secondary); }
.qs-ctx-card .nx-muted { margin: 0; }
.qs-ctx-card .qs-pre { max-height: 180px; }
.qs-ctx-finding { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-6); margin: 0; font-size: var(--f-ms); }
.qs-ctx-finding .nx-chip { margin: 0; }
.qs-decide { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-04); padding: var(--cds-spacing-04) var(--cds-spacing-05); margin: var(--cds-spacing-04) 0 0; border-top: 1px solid var(--cds-border-subtle-01); border-bottom: 1px solid var(--cds-border-subtle-01); }
.qs-decide .qs-input { min-height: 32px; }
.qs-decide { align-items: center; }
/* Review: one card per change (an approval item) of the file on show; the decision bar above the files */
.qs-changes { display: flex; flex-direction: column; }
.qs-change + .qs-change { border-top: 1px solid var(--cds-border-subtle-01); }
.qs-change-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03); margin: 0; padding: var(--cds-spacing-04) var(--cds-spacing-05) 0; font-size: var(--cds-body-01); font-weight: var(--fw-semibold); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.qs-ctx-card .nx-mono, .qs-ctx-card p { overflow-wrap: anywhere; }
.qs-decision-bar { align-items: center; }
/* A change verified without its tests: said beside the verdict, in the warning tone */
.qs-not-run { display: flex; align-items: flex-start; gap: var(--hx-space-6); margin: 0; color: var(--cds-support-warning); font-size: var(--f-ms); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.qs-not-run .nx-i { flex: none; margin-top: var(--cds-spacing-01); }
[data-carbon-theme="g10"] .qs-not-run, [data-carbon-theme="white"] .qs-not-run { color: var(--cds-text-primary); }
.qs-signin-notice { margin-bottom: var(--cds-spacing-03); }
.qs-decision-bar > span { flex: 1 1 320px; }
.qs-diff-wrap { overflow: auto; max-height: 70vh; margin: var(--cds-spacing-04) var(--cds-spacing-05) 0; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-field-01); }
.qs-diff-wrap:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
[data-carbon-theme="g10"] .qs-diff-wrap, [data-carbon-theme="white"] .qs-diff-wrap { background: var(--cds-background); }
.qs-diff { border-collapse: collapse; width: 100%; font: var(--cds-label-01)/20px var(--cds-font-mono, monospace); table-layout: fixed; }
.qs-diff.is-split { min-width: 760px; }
.qs-diff.is-unified { min-width: 420px; }
.qs-col-ln { width: 52px; }
.qs-diff td { padding: 0 var(--cds-spacing-03); vertical-align: top; }
.qs-ln { text-align: right; color: var(--cds-text-secondary); user-select: none; font-variant-numeric: tabular-nums; border-right: 1px solid var(--cds-border-subtle-01); }
.qs-code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: var(--cds-text-primary); }
.qs-sign { display: inline-block; width: 1.2ch; color: var(--cds-text-secondary); user-select: none; }
.qs-code.is-add, .is-unified tr.is-add .qs-code { background: var(--qs-add-bg); }
.qs-code.is-del, .is-unified tr.is-del .qs-code { background: var(--qs-del-bg); }
.qs-ln.is-add, .is-unified tr.is-add .qs-ln { background: var(--qs-add-ln); }
.qs-ln.is-del, .is-unified tr.is-del .qs-ln { background: var(--qs-del-ln); }
.qs-code.is-empty, .qs-ln.is-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--cds-border-subtle-01) 50%, transparent) 6px 7px); }
.qs-hunk td { padding: var(--cds-spacing-02) var(--cds-spacing-03); color: var(--cds-text-secondary); background: color-mix(in srgb, var(--nx-info) 10%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
.qs-dnote td { padding: var(--cds-spacing-01) var(--cds-spacing-03); font-style: italic; color: var(--cds-text-helper); }
.qs-tk-kw { color: var(--qs-tk-kw); } .qs-tk-str { color: var(--qs-tk-str); } .qs-tk-cm { color: var(--qs-tk-cm); font-style: italic; }
.qs-tk-num { color: var(--qs-tk-num); } .qs-tk-meta { color: var(--qs-tk-meta); } .qs-tk-key { color: var(--qs-tk-key); }
.qs-crlf, .qs-ctl, .qs-cut { display: inline-block; margin-left: var(--cds-spacing-02); padding: 0 var(--cds-spacing-02); border-radius: 0; font-size: var(--f-xs); line-height: 16px; vertical-align: 1px; color: var(--cds-text-secondary); background: var(--cds-layer-accent-01); }
.qs-ctl { color: var(--cds-text-primary); box-shadow: inset 0 0 0 1px var(--nx-warn); }
.qs-diff-note { display: flex; align-items: center; gap: var(--hx-space-10); margin: var(--cds-spacing-04) var(--cds-spacing-05) 0; padding: var(--cds-spacing-05); font-size: var(--f-ms); color: var(--cds-text-secondary); background: var(--cds-layer-02); border-radius: 0; }
.qs-diff-more { display: flex; align-items: center; gap: var(--cds-spacing-04); margin: var(--cds-spacing-03) var(--cds-spacing-05) 0; }

/* ---------------------------------------------------------------- Dialogs & gates */
.qs-dialog-backdrop { position: fixed; inset: 0; z-index: var(--cds-z-drawer); display: grid; place-items: center; padding: var(--cds-spacing-05); background: var(--hx-overlay); }
[data-carbon-theme="g10"] .qs-dialog-backdrop, [data-carbon-theme="white"] .qs-dialog-backdrop { background: var(--hx-overlay); }
.qs-dialog-backdrop [hidden] { display: none !important; }
.qs-dialog {
  width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--cds-layer-01); color: var(--cds-text-primary); border-top: 3px solid var(--cds-interactive);
  box-shadow: var(--hx-shadow-lg); font-family: var(--cds-font-sans, 'IBM Plex Sans', sans-serif); font-size: var(--cds-body-01);
}
.qs-dialog.is-wide { width: min(800px, 100%); }   /* the studio family's dialog widths (Secant, Fluidics) */
.qs-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cds-spacing-04); padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-03); }
.qs-dlg-head h2 { margin: 0; font-size: var(--f-xl); line-height: 28px; font-weight: var(--fw-regular); overflow-wrap: anywhere; }
.qs-dlg-body { padding: 0 var(--cds-spacing-05) var(--cds-spacing-05); overflow: auto; display: flex; flex-direction: column; gap: var(--cds-spacing-04); line-height: 20px; }
.qs-dlg-body p { margin: 0; }
.qs-dlg-err { padding: 0 var(--cds-spacing-05) var(--cds-spacing-03); }
.qs-dlg-foot { display: flex; justify-content: flex-end; gap: 1px; background: var(--cds-border-subtle-01); }
.qs-dlg-foot .nx-btn { flex: 0 1 50%; height: 56px; border-radius: 0; border: 0; justify-content: flex-start; padding: 0 var(--cds-spacing-05); font-size: var(--cds-body-01); background: var(--cds-button-secondary, var(--hx-gray-60)); color: var(--cds-text-on-color); }
.qs-dlg-foot .nx-btn:hover { background: var(--cds-button-secondary-hover); }
.qs-dlg-foot .qs-dlg-extra { background: var(--cds-layer-02); color: var(--cds-link-primary); }
.qs-dlg-foot .qs-dlg-extra:hover { background: var(--cds-layer-hover-02); }
.qs-plain { list-style: none; margin: var(--cds-spacing-03) 0; padding: 0; display: flex; flex-direction: column; gap: var(--cds-spacing-02); overflow-wrap: anywhere; }
.qs-dlg-foot .nx-btn-primary { background: var(--cds-button-primary, var(--hx-sev-info)); }
.qs-dlg-foot .nx-btn-primary:hover { background: var(--cds-button-primary-hover, var(--hx-blue-60-hover)); }
.qs-dlg-foot .qs-btn-danger-fill { background: var(--cds-button-danger-primary, var(--hx-sev-critical)); }
.qs-dlg-foot .qs-btn-danger-fill:hover { background: var(--cds-button-danger-hover); }
.qs-dlg-foot .nx-btn:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: -4px; }
.qs-dlg-foot .nx-btn[disabled] { opacity: .6; cursor: progress; }
.qs-dialog .nx-icon-btn { color: var(--cds-icon-primary); }
.qs-dialog .nx-mono { font-family: var(--cds-font-mono, monospace); font-size: var(--cds-label-01); }
.qs-dialog .nx-mini-table th { text-align: left; }
.qs-dialog kbd { font: var(--cds-label-01) var(--cds-font-mono, monospace); padding: 1px var(--hx-space-6); border: 1px solid var(--cds-border-strong-01); border-radius: 0; white-space: nowrap; }
.qs-gate { display: flex; gap: var(--cds-spacing-04); padding: var(--cds-spacing-04); background: color-mix(in srgb, var(--nx-warn, var(--hx-sev-low)) 10%, var(--cds-layer-02)); border-left: 3px solid var(--nx-warn, var(--hx-sev-low)); }
.qs-gate > .nx-i { margin-top: var(--cds-spacing-01); color: var(--nx-warn-text, var(--hx-sev-low)); flex-shrink: 0; }
.qs-gate p { margin: var(--cds-spacing-02) 0 0; font-size: var(--f-ms); line-height: 20px; }
.qs-gate-none { padding: var(--cds-spacing-03) var(--cds-spacing-04); background: var(--cds-layer-02); }
/* A dialog sits outside .nx-root: it takes the shared status scale (tokens.css, theme-aware) directly. */
.qs-dialog-backdrop { --nx-warn: var(--hx-status-degraded); --nx-warn-text: var(--hx-status-degraded-text); --nx-err: var(--hx-status-down); }
.qs-dialog .qs-err { color: var(--nx-err); }
.qs-dialog .qs-req { color: var(--nx-err); }

.qs-toast { position: absolute; bottom: 20px; z-index: var(--hx-z-60); }
.qs-toast.tone-error { border-left-color: var(--nx-err); }
.qs-toast.tone-error .nx-i { color: var(--nx-err); }

/* ---------------------------------------------------------------- Responsive (container: the root) */
@container nx (max-width: 1320px) {
  .qs-home-grid { grid-template-columns: minmax(0, 1fr); }
  .qs-home-grid .qs-panel:first-child { margin-right: var(--cds-spacing-05); }
  .qs-home-grid .qs-panel + .qs-panel { margin-left: var(--cds-spacing-05); }
  .qs-run-top { grid-template-columns: minmax(0, 1fr) 240px; }
  .qs-review { grid-template-columns: 240px minmax(0, 1fr); }
}
/* The estates' narrow toolbar reorders its groups (title after the controls); the studio keeps its title first. */
@container nx (max-width: 1260px) {
  .qs-toolbar > .nx-tb-title, .qs-toolbar > .nx-tb-spacer { order: 0; }
}
/* The three studios' navs go to icons (their labels in the tooltip) at the same width, so their toolbars keep one row. */
@container nx (max-width: 1180px) {
  .qs-nav-link span:not(.nx-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .qs-nav-link { padding: 0 var(--cds-spacing-03); }
}
@container nx (max-width: 1100px) {
  .qs-actions .nx-btn { padding: 0 var(--hx-space-10); }
}
@container nx (max-width: 900px) {
  .qs-editor { grid-template-columns: minmax(0, 1fr); position: relative; }
  .qs-palette { display: none; position: absolute; z-index: var(--hx-z-30); left: 0; top: 0; bottom: 0; width: min(300px, 88%); box-shadow: var(--hx-shadow-md); }
  .qs-editor.pal-open .qs-palette { display: flex; }
  .qs-pal-toggle { display: inline-flex; }
  .qs-run-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(220px, 1fr) auto; }
  .qs-tput { border-left: 0; border-top: 1px solid var(--cds-border-subtle-01); }
  .qs-tput-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qs-tput-wide { grid-column: auto; }
  .qs-spark, .qs-spark-cap { display: none; }
  .qs-review { grid-template-columns: minmax(0, 1fr); }
  .qs-files { position: static; max-height: 220px; border-right: 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
  .qs-c-node, .qs-c-upd { display: none; }
  .qs-root[data-screen="run"] .qs-body { overflow: auto; display: block; }
  .qs-root[data-screen="run"] .qs-run { min-height: 900px; }
}
@container nx (max-width: 640px) {
  .qs-toolbar { gap: var(--cds-spacing-03); padding: var(--cds-spacing-03); }
  .qs-toolbar .nx-tb-spacer { display: none; }
  .qs-nav { order: 3; flex-basis: 100%; }
  .qs-nav ul { width: 100%; }
  .qs-nav li { flex: 1; }
  .qs-nav-link { width: 100%; justify-content: center; }
  .qs-tb-end { order: 4; flex-basis: 100%; margin-left: 0; }
  .qs-actions { flex: 1 1 auto; justify-content: flex-start; }
  .qs-screen-title { max-width: 200px; }
  .qs-kpis .nx-kpi { flex: 1 1 50%; min-width: 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
  .qs-kpis .nx-kpi:nth-child(2n) { border-right: 0; }
  .qs-panel, .qs-review { margin-left: var(--cds-spacing-03); margin-right: var(--cds-spacing-03); }
  .qs-home-grid .qs-panel:first-child { margin-right: var(--cds-spacing-03); }
  .qs-home-grid .qs-panel + .qs-panel { margin-left: var(--cds-spacing-03); }
  .qs-tpl-grid { padding: var(--cds-spacing-03); }
  .qs-tabs { margin-left: var(--cds-spacing-03); margin-right: var(--cds-spacing-03); }
  .qs-tput-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs-c-file, .qs-c-att { display: none; }
  .qs-c-st { width: 132px; }
  .qs-vt-table { table-layout: auto; }
  .qs-vt-row td:nth-child(2) { white-space: normal; }
  .qs-vt-row .qs-status { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .qs-legend { display: none; }
  .qs-row-actions { white-space: normal; }
  .qs-row-actions .nx-btn { margin: var(--cds-spacing-01) 0 var(--cds-spacing-01) var(--cds-spacing-02); }
  .qs-ed-head { padding: var(--cds-spacing-03); }
  .qs-name-input { font-size: var(--cds-heading-02); }
  .qs-problems { max-height: 22%; }
  .qs-diff-wrap, .qs-ctx-grid, .qs-decide, .qs-file-head { margin-left: 0; margin-right: 0; padding-left: var(--cds-spacing-03); padding-right: var(--cds-spacing-03); }
  .qs-diff-wrap { margin: var(--cds-spacing-03); }
  .qs-inspector { width: 100%; }
  .qs-log-drawer { width: 100%; }
  .qs-ed-panel.has-drawer .qs-zoombar { display: none; }
  .qs-table .qs-cell-sub { display: none; }
}
@container nx (max-width: 400px) {
  .qs-kpis .nx-kpi { padding: var(--cds-spacing-03) var(--hx-space-10); }
  .qs-kpis .nx-kpi-value { font-size: var(--f-xl); }
  .qs-editor .qs-notice { margin: var(--hx-space-6) var(--cds-spacing-03) 0; }
  .qs-zoombar .nx-zoom-sep, .qs-zoombar .qs-zoom-val { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-edge.is-active { animation: none; stroke-dasharray: none; }
  .qs-prog span, .qs-port i, .qs-tpl { transition: none; }
  .qs-skel-val { animation: none; }
}

/* ---------------------------------------------------------------- First run, sign-in, conflicts, re-scan */
.qs-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cds-spacing-05); padding: var(--cds-spacing-05); border-left: 3px solid var(--cds-interactive); }
.qs-welcome-body { display: flex; flex-direction: column; gap: var(--hx-space-10); min-width: 0; }
.qs-steps { margin: 0; padding-left: var(--hx-space-20); display: grid; gap: var(--hx-space-6); font-size: var(--f-ms); line-height: 20px; }
.qs-steps li span { display: block; color: var(--cds-text-secondary); }
.qs-safety { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--hx-space-6) var(--cds-spacing-05); font-size: var(--f-ms); line-height: 20px; }
.qs-safety li { display: flex; align-items: flex-start; gap: var(--hx-space-6); }
.qs-safety .nx-i { flex: none; margin-top: var(--cds-spacing-01); color: var(--cds-link-primary); }
.qs-welcome-act .nx-btn { white-space: normal; height: auto; min-height: 32px; padding-top: var(--hx-space-6); padding-bottom: var(--hx-space-6); text-align: left; line-height: 20px; }
.qs-welcome-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hx-space-6); max-width: 280px; font-size: var(--cds-label-01); }
.qs-panel-foot { margin: 0; padding: 0 var(--cds-spacing-05) var(--cds-spacing-04); font-size: var(--cds-label-01); }
.qs-notice > .qs-signin-btn { margin-left: auto; flex: none; align-self: center; }
.qs-toast-act { display: block; margin-top: var(--hx-space-6); }
.qs-dlg-err .qs-signin-btn { margin-left: var(--cds-spacing-03); }
.qs-choices { display: flex; flex-direction: column; gap: var(--cds-spacing-03); }
.qs-choice { display: flex; align-items: flex-start; gap: var(--hx-space-10); padding: var(--cds-spacing-03) var(--hx-space-10); border: 1px solid var(--cds-border-subtle-01); cursor: pointer; }
.qs-choice:has(input:checked) { border-color: var(--cds-interactive); }
.qs-choice input { margin-top: var(--cds-spacing-01); accent-color: var(--cds-interactive); }
.qs-choice > span { display: flex; flex-direction: column; gap: var(--cds-spacing-01); }
.qs-rescan { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cds-spacing-02); font-size: var(--cds-label-01); }
.qs-rescan p { margin: 0; overflow-wrap: anywhere; }
.qs-estate-note { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--hx-space-6); font-size: var(--cds-label-01); }
.qs-tput-grid .qs-eta-why { display: block; margin-top: var(--cds-spacing-01); font-size: var(--cds-label-01); line-height: 16px; color: var(--cds-text-helper); }
.qs-keys-global[hidden] { display: none; }
.qs-outcome { display: flex; align-items: center; gap: var(--cds-spacing-02); margin-top: var(--cds-spacing-02); font-size: var(--f-xs); line-height: 16px; color: var(--cds-text-secondary); white-space: normal; }
.qs-outcome.is-warn { color: var(--nx-warn-text); font-weight: var(--fw-semibold); }
.qs-outcome .nx-i { flex: none; }
.qs-outcome-bar { align-items: center; flex-wrap: wrap; }
.qs-outcome-bar > span:not(.qs-outcome-acts) { flex: 1 1 320px; }
.qs-outcome-acts { display: inline-flex; flex-wrap: wrap; gap: var(--hx-space-6); }
@container nx (max-width: 900px) { .qs-welcome { grid-template-columns: minmax(0, 1fr); } .qs-welcome-act { max-width: none; } }

/* ---------------------------------------------------------------- "Fix with Quanta" entry points on the estates */
.nx-finding .nx-quanta-fix { display: inline-flex; align-items: center; margin-top: var(--cds-spacing-03); font-size: var(--cds-label-01); font-weight: var(--fw-medium); color: var(--cds-link-primary); text-decoration: none; }
.nx-finding .nx-quanta-fix::before { content: ''; width: 8px; height: 8px; margin-right: var(--hx-space-6); border-radius: var(--hx-radius-round); border: 1.5px solid currentColor; }
.nx-finding .nx-quanta-fix:hover { text-decoration: underline; }
.nx-finding .nx-quanta-fix:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-offset); }
.nx-quanta-link { text-decoration: none; }

/* Phones: the studio grows with its content and the page scrolls, so the canvas, the items and the drawers get room. */
@media (max-width: 671px) {
  .qs-root { height: auto; min-height: var(--nx-h); overflow: visible; }
  .qs-root .qs-body, .qs-root[data-screen="editor"] .qs-body, .qs-root[data-screen="run"] .qs-body { overflow: visible; display: block; }
  .qs-root[data-screen="run"] .qs-run { min-height: 0; }
  .qs-editor { display: block; position: relative; }
  .qs-ed-panel { min-height: 480px; }
  .qs-ed-panel .qs-canvas-host { min-height: 480px; }
  .qs-palette { max-height: 640px; }
  .qs-run-top { display: block; }
  .qs-run-dag { height: 380px; }
  .qs-items { flex: none; height: 560px; }
  .qs-run-top { flex: none; }
  .qs-inspector, .qs-log-drawer { width: 100%; }
}
.qs-table .qs-cell-strong { overflow-wrap: normal; min-width: 12ch; }

/* ---------------------------------------------------------------- Hostile text (overflow pass, 2026-10-02)
   Names, paths, ids, reasons and user names come from repositories, the engine and other people: one unbroken
   220-character token, a CJK sentence with no spaces or a Windows path must wrap inside its card, form, dialog or
   toast, never widen it. `anywhere` (not break-word) also lowers the min-content width, so a grid or flex item with
   such a word cannot push its track or row wider than the screen. Table headers are our own copy and keep whole
   words; table cells already scroll inside their wrappers. */
.qs-root, .qs-dialog-backdrop { overflow-wrap: anywhere; }
.qs-root th, .qs-dialog-backdrop th { overflow-wrap: normal; }
.qs-tpl-name, .qs-tpl-desc, .qs-label, .qs-help, .qs-err, .qs-dlg-body p { min-width: 0; overflow-wrap: anywhere; }
.qs-check { min-width: 0; }
/* the toast's text column is a flex item of the toast: without min-width 0 a long reason runs out of the box */
.qs-toast { max-width: min(520px, calc(100% - 32px)); }
.qs-toast > div, .qs-toast div { min-width: 0; }
.qs-toast strong, .qs-toast span { overflow-wrap: anywhere; }
/* Controls carry our own short copy (All 2,000, Canvas, Run): they keep whole words, so a squeezed tool row wraps
   instead of breaking a label into letters. */
.qs-root :is(.nx-btn, .nx-fchip, .nx-tab, .nx-pill, .nx-count, .qs-nav-link), .qs-dialog-backdrop :is(.nx-btn, .nx-tab) { overflow-wrap: normal; }
/* A row of filter chips (history: All / Running / Waiting / Done / Failed) wraps on a phone instead of running past
   the panel; a finished run's outcome actions wrap under the text, and a long report name wraps inside its button. */
.qs-root .nx-filter-chips { flex-wrap: wrap; }
.qs-outcome-bar > * { min-width: 0; }
.qs-outcome-acts { max-width: 100%; }
.qs-outcome-acts .nx-btn { max-width: 100%; height: auto; min-height: 24px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
/* A chip holds a value (a repository, a file, a port, a user): it wraps inside its box instead of running out. */
.qs-root .nx-chip, .qs-dialog-backdrop .nx-chip { max-width: 100%; height: auto; min-height: 20px; white-space: normal; overflow-wrap: anywhere; }

/* Security Overview (quanta_security.js): gate card, KPIs, SLA board, findings, policy and waiver editor, imports. */
.qs-sec { padding-bottom: var(--cds-spacing-07); }
.qs-sec-scope { display: flex; flex-wrap: wrap; align-items: end; gap: var(--cds-spacing-03); margin: var(--cds-spacing-05) var(--cds-spacing-05) 0; }
.qs-sec-scope .qs-input { width: min(320px, 100%); }
.qs-sec-scope .qs-label { flex: 1 0 100%; margin: 0; }   /* the label sits above its field, not beside it */
.qs-sec-scope .nx-btn { height: auto; min-height: 36px; }   /* as tall as the 36 px field beside it, not the 32 px button default */
.qs-sec .qs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--cds-spacing-05); margin: var(--cds-spacing-05); }
.qs-sec .qs-grid > .qs-panel { margin: 0; }
.qs-sec .qs-panel-body { padding: var(--cds-spacing-04) var(--cds-spacing-05); }
.qs-sec .qs-h2 { margin: 0; font-size: var(--f-ms); font-weight: var(--fw-semibold); color: var(--cds-text-primary); }
.qs-sec .qs-h3 { margin: var(--cds-spacing-05) 0 var(--cds-spacing-02); font-size: var(--f-ms); font-weight: var(--fw-semibold); }
.qs-sec .qs-help { margin: var(--cds-spacing-02) 0; font-size: var(--cds-label-01); color: var(--cds-text-secondary); }
.qs-sec-gate-pill, .qs-gate-pill { display: inline-flex; align-items: center; padding: var(--cds-spacing-01) var(--cds-spacing-03); font-size: var(--cds-label-01); font-weight: var(--fw-semibold); border: 1px solid var(--t, var(--cds-border-strong-01)); color: var(--cds-text-primary); background: color-mix(in srgb, var(--t, transparent) 14%, transparent); }
.qs-gate-pill.tone-ok { --t: var(--qs-tone-ok); } .qs-gate-pill.tone-warn { --t: var(--qs-tone-warn); } .qs-gate-pill.tone-err { --t: var(--qs-tone-err); }
.qs-reasons { margin: var(--cds-spacing-03) 0; padding-left: var(--cds-spacing-05); }
.qs-sev-row { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-05); }
.qs-sev { display: inline-block; padding: 0 var(--cds-spacing-02); font-size: var(--f-xs); font-weight: var(--fw-semibold); text-transform: capitalize; border-left: 3px solid var(--cds-border-strong-01); background: var(--cds-layer-02); color: var(--cds-text-primary); }
.qs-sev.sev-critical { border-color: var(--hx-sev-critical, var(--nx-err)); } .qs-sev.sev-high { border-color: var(--nx-err); } .qs-sev.sev-medium { border-color: var(--nx-warn); } .qs-sev.sev-low { border-color: var(--nx-info); }
.qs-sec .qs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(130px, calc((100% - var(--cds-spacing-03)) / 2))), 1fr)); gap: var(--cds-spacing-03); align-content: start; }   /* the four security KPIs: 2 x 2 or one column, never 3 + 1 */
.qs-kpi { display: flex; flex-direction: column; padding: var(--cds-spacing-04); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); min-width: 0; }
.qs-kpi-label, .qs-kpi-sub { font-size: var(--cds-label-01); color: var(--cds-text-secondary); }
.qs-kpi-value { font-size: var(--f-2xl); line-height: 36px; font-weight: 300; color: var(--cds-text-primary); }
.qs-spark { margin: 0 0 var(--cds-spacing-04); color: var(--cds-interactive); }
.qs-spark { height: auto; min-height: 96px; display: flex; flex-direction: column; gap: var(--cds-spacing-02); }
.qs-spark svg { flex: none; width: 100%; height: 70px; min-height: 70px; display: block; overflow: visible; }
.qs-sec-filter { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02); margin: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-03); }
.qs-sec-filter .is-active { background: var(--cds-layer-selected-01, var(--cds-layer-02)); border-color: var(--cds-interactive); }
.qs-sec-filter + .qs-count + .qs-table-wrap, .qs-sec > #qs-sec-panel > .qs-table-wrap { margin: 0 var(--cds-spacing-05); }
#qs-sec-panel > .qs-table-wrap { margin: 0 var(--cds-spacing-05); }
.qs-table-wrap { overflow-x: auto; max-width: 100%; }
.qs-cell-strong { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.qs-mono { font-family: var(--cds-font-mono, monospace); font-size: var(--cds-label-01); overflow-wrap: anywhere; }
.qs-sec .qs-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 84px), 1fr)); gap: var(--cds-spacing-03); }
.qs-sec form .qs-field { margin-bottom: var(--cds-spacing-04); }
.qs-sec .qs-textarea, .qs-dialog .qs-textarea { min-height: 72px; resize: vertical; }
.qs-links { list-style: none; margin: 0 0 var(--cds-spacing-03); padding: 0; display: flex; flex-direction: column; gap: var(--cds-spacing-03); align-items: flex-start; }
.qs-code { margin: var(--cds-spacing-03) 0; padding: var(--cds-spacing-04); overflow-x: auto; background: var(--cds-layer-02); font-family: var(--cds-font-mono, monospace); font-size: var(--cds-label-01); }
.qs-comp { margin: 0; padding-left: var(--cds-spacing-05); }
.qs-trace { margin: var(--cds-spacing-02) 0; padding-left: var(--cds-spacing-06); display: flex; flex-direction: column; gap: var(--cds-spacing-02); }
.qs-reach { padding: 0 var(--cds-spacing-02); border-left: 3px solid var(--cds-border-strong-01); background: var(--cds-layer-02); }
.qs-reach.reach-reachable { border-color: var(--nx-err); } .qs-reach.reach-unreachable { border-color: var(--nx-ok); }
@media (max-width: 671px) { .qs-sec-scope, .qs-sec-filter { margin-inline: var(--cds-spacing-04); } .qs-sec .qs-grid { margin: var(--cds-spacing-04); } #qs-sec-panel > .qs-table-wrap { margin-inline: var(--cds-spacing-04); } }

/* write controls turned off for a principal who may read but not write */
.qs-root [data-qs-locked][aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: auto; }
.qs-readonly-note { margin-block: var(--cds-spacing-04); flex: none; }