/* Quality · Hybrid Concept B — presentation only over existing Campaign QA. */
.qhb-frame {
  --qhb-hero-min-height: 9.75rem;
  --qhb-panel-padding: 1.25rem;
  --qhb-history-width: 15rem;
  --qhb-touch-target: 2.75rem;
  --qhb-icon-box: 2.5rem;
  --qhb-icon-size: 1.0625rem;
  --qhb-type-hero: 2rem;
  --qhb-type-title: .9375rem;
  --qhb-type-value: .875rem;
  --qhb-type-body: .75rem;
  --qhb-type-meta: .6875rem;
  --qhb-type-label: .625rem;
  --qhb-leading-copy: 1.5;
  --qhb-leading-hero: 1.12;
  --qhb-leading-tight: 1.35;
  --qhb-leading-meta: 1.4;
  --qhb-leading-value: 1;
  --qhb-tracking-label: .04rem;
  --qhb-hero-copy-max: 38rem;
  --qhb-command-picker-min: 12rem;
  --qhb-command-picker-max: 17rem;
  --qhb-type-command-title: 1.125rem;
  --qhb-selected-accent-width: .1875rem;
  --qhb-history-empty-copy-max: 11rem;
  --qhb-type-score: 1.5rem;
  --qhb-type-count: 1.25rem;
  --qhb-finding-label-width: 4.25rem;
  --qhb-empty-copy-max: 30rem;
  --qhb-history-condensed-width: 12.5rem;
  --qhb-run-mobile-width: 14.75rem;
  --qhb-run-compact-width: 14rem;
}
.qhb-layout { align-items: start; }
.qhb-center { min-width: 0; }
.qhb-hero,
.qhb-command,
.qhb-history,
.qhb-decision,
.qhb-panel {
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface-1-solid) 88%, transparent);
  box-shadow: var(--panel-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.qhb-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  min-height: var(--qhb-hero-min-height);
  padding: var(--space-6);
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--icon-violet) 13%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-1-solid) 88%, transparent);
}
.qhb-eyebrow,
.qhb-command-copy > span,
.qhb-history header > span,
.qhb-decision > header > div:first-child > span,
.qhb-panel-head > div > span,
.qhb-context-card > span,
.qhb-coverage-card > span {
  color: var(--icon-violet);
  font-size: var(--qhb-type-label);
  font-weight: 700;
  letter-spacing: var(--qhb-tracking-label);
  text-transform: uppercase;
}
.qhb-hero h1 {
  margin: var(--space-2) 0 0;
  font: 700 var(--qhb-type-hero)/var(--qhb-leading-hero) "Manrope", var(--font-sans);
  letter-spacing: var(--mcb-tracking-hero);
}
.qhb-hero p {
  max-width: var(--qhb-hero-copy-max);
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--qhb-type-value);
  line-height: var(--qhb-leading-copy);
  text-wrap: pretty;
}
.qhb-scope {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-height: var(--mcb-chip-height);
  padding: var(--space-2) var(--space-3);
  border: var(--mcb-border-width) solid color-mix(in srgb, var(--success) 28%, var(--border-subtle));
  border-radius: var(--mcb-radius-tab);
  background: color-mix(in srgb, var(--success) 6%, var(--surface-1));
  color: var(--success);
  font-size: var(--qhb-type-meta);
  font-weight: 700;
}
.qhb-scope .ui-icon { width: var(--mcb-icon-small); height: var(--mcb-icon-small); }

.qhb-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--qhb-command-picker-min), var(--qhb-command-picker-max));
  gap: var(--space-5);
  align-items: end;
  padding: var(--qhb-panel-padding);
}
.qhb-command-copy { min-width: 0; }
.qhb-command-copy h2,
.qhb-history h2,
.qhb-panel-head h2 {
  margin: var(--space-1) 0 0;
  color: var(--text-primary);
  font: 700 var(--qhb-type-title)/var(--qhb-leading-tight) "Manrope", var(--font-sans);
}
.qhb-command-copy h2 { overflow: hidden; font-size: var(--qhb-type-command-title); text-overflow: ellipsis; white-space: nowrap; }
.qhb-command-copy small { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--qhb-type-meta); }
.qhb-campaign-picker { display: grid; gap: var(--space-2); min-width: 0; }
.qhb-campaign-picker > span { color: var(--text-secondary); font-size: var(--qhb-type-meta); font-weight: 700; }
.qhb-campaign-picker .field { width: 100%; min-width: 0; }
.qhb-campaign-cta { justify-self: end; }
.qhb-outcomes:empty { display: none; }
.qhb-outcomes > * { margin: 0; }
.qhb-content-exceptions { min-width: 0; padding: var(--qhb-panel-padding); }
.qhb-content-exception-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.qhb-content-exception {
  display: grid;
  grid-template-columns: var(--qhb-icon-box) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: var(--qhb-touch-target);
  padding: var(--space-2) var(--space-3);
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-radius: var(--mcb-radius-tab);
  background: color-mix(in srgb, var(--surface-2) 28%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.qhb-content-exception:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-2) 54%, transparent); }
.qhb-content-exception > span:first-child { display: grid; width: var(--qhb-icon-box); height: var(--qhb-icon-box); place-items: center; border-radius: var(--mcb-radius-tab); background: color-mix(in srgb, var(--danger) 8%, var(--surface-1)); color: var(--danger); }
.qhb-content-exception .ui-icon { width: var(--qhb-icon-size); height: var(--qhb-icon-size); }
.qhb-content-exception > span:nth-child(2) { min-width: 0; }
.qhb-content-exception b,
.qhb-content-exception small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qhb-content-exception b { font-size: var(--qhb-type-body); }
.qhb-content-exception small,
.qhb-content-exception > span:last-child { color: var(--text-muted); font-size: var(--qhb-type-label); }
.qhb-content-clear { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--qhb-type-body); }

.qhb-workspace {
  display: grid;
  grid-template-columns: var(--qhb-history-width) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}
.qhb-history { min-width: 0; padding: var(--space-4); }
.qhb-history > div { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.qhb-run-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  padding: var(--space-3);
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--surface-2) 34%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.qhb-run-row:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-2) 54%, transparent); }
.qhb-run-row.is-selected {
  border-color: color-mix(in srgb, var(--icon-violet) 48%, var(--border-subtle));
  background: color-mix(in srgb, var(--icon-violet) 9%, var(--surface-1-solid));
  box-shadow: inset var(--qhb-selected-accent-width) 0 0 var(--icon-violet);
}
.qhb-run-row > span { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }
.qhb-run-row > span:first-child { flex: 1 1 auto; }
.qhb-run-row > span:last-child { flex: none; justify-items: end; text-align: right; }
.qhb-run-row b { overflow: hidden; font-size: var(--qhb-type-meta); text-overflow: ellipsis; white-space: nowrap; }
.qhb-run-row small { color: var(--text-muted); font-size: var(--qhb-type-label); line-height: var(--qhb-leading-tight); }
.qhb-history-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-2); text-align: center; }
.qhb-history-empty > span { display: grid; width: var(--qhb-icon-box); height: var(--qhb-icon-box); place-items: center; border-radius: var(--mcb-radius-tab); background: color-mix(in srgb, var(--icon-violet) 8%, var(--surface-2)); color: var(--icon-violet); }
.qhb-history-empty .ui-icon { width: var(--qhb-icon-size); height: var(--qhb-icon-size); }
.qhb-history-empty strong { margin-top: var(--space-2); font-size: var(--qhb-type-value); }
.qhb-history-empty small { max-width: var(--qhb-history-empty-copy-max); color: var(--text-muted); line-height: var(--qhb-leading-copy); }

.qhb-detail { min-width: 0; }
.qhb-detail-stack { display: grid; gap: var(--space-4); }
.qhb-decision,
.qhb-panel { min-width: 0; padding: var(--qhb-panel-padding); }
.qhb-decision > header,
.qhb-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.qhb-decision h2 { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0; }
.qhb-score { color: var(--text-primary); font: 700 var(--qhb-type-score)/var(--qhb-leading-value) "Manrope", var(--font-sans); }
.qhb-score small { color: var(--text-muted); font-size: var(--qhb-type-meta); font-weight: 600; }
.qhb-run-time { display: grid; justify-items: end; gap: var(--space-1); color: var(--text-muted); font-size: var(--qhb-type-label); line-height: var(--qhb-leading-meta); text-align: right; }
.qhb-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-4);
  overflow: hidden;
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-radius: var(--r-control);
}
.qhb-counts > div { padding: var(--space-3); text-align: center; background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
.qhb-counts > div + div { border-left: var(--mcb-border-width) solid var(--border-subtle); }
.qhb-counts strong,
.qhb-counts span { display: block; }
.qhb-counts strong { font: 700 var(--qhb-type-count)/var(--qhb-leading-value) "Manrope", var(--font-sans); }
.qhb-counts span { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--qhb-type-label); text-transform: capitalize; }
.qhb-counts [data-severity="critical"] strong { color: var(--danger); }
.qhb-counts [data-severity="major"] strong { color: var(--icon-rose); }
.qhb-counts [data-severity="minor"] strong { color: var(--warning); }
.qhb-counts [data-severity="info"] strong { color: var(--info); }
.qhb-reasons { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding-left: var(--space-5); color: var(--text-secondary); font-size: var(--qhb-type-body); line-height: var(--qhb-leading-copy); }
.qhb-warning,
.qhb-approval-note,
.qhb-revision-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: var(--mcb-border-width) solid color-mix(in srgb, var(--warning) 28%, var(--border-subtle));
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--warning) 5%, var(--surface-1));
  color: var(--text-secondary);
  font-size: var(--qhb-type-body);
  line-height: var(--qhb-leading-copy);
}
.qhb-warning { color: var(--warning); }
.qhb-warning .ui-icon { width: var(--mcb-icon-small); height: var(--mcb-icon-small); flex: none; margin-top: var(--space-1); }
.qhb-approval-note { display: grid; }
.qhb-approval-note b { color: var(--warning); }
.qhb-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.qhb-actions .btn { min-height: var(--qhb-touch-target); }

.qhb-panel-head > small { flex: none; color: var(--text-muted); font-size: var(--qhb-type-meta); }
.qhb-finding-list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.qhb-finding {
  padding: var(--space-4);
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-left: var(--qhb-selected-accent-width) solid var(--info);
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--surface-2) 30%, transparent);
}
.qhb-finding[data-severity="critical"],
.qhb-finding[data-severity="major"] { border-left-color: var(--danger); }
.qhb-finding[data-severity="minor"] { border-left-color: var(--warning); }
.qhb-finding > header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.qhb-finding > header span:first-child { color: var(--text-muted); font-size: var(--qhb-type-label); }
.qhb-finding h3 { margin: var(--space-1) 0 0; font-size: var(--qhb-type-value); line-height: var(--qhb-leading-tight); }
.qhb-finding p { display: grid; grid-template-columns: var(--qhb-finding-label-width) minmax(0, 1fr); gap: var(--space-3); margin: var(--space-3) 0 0; font-size: var(--qhb-type-body); line-height: var(--qhb-leading-copy); }
.qhb-finding p b { color: var(--text-muted); font-size: var(--qhb-type-label); text-transform: uppercase; }
.qhb-finding p span { min-width: 0; overflow-wrap: anywhere; }
.qhb-recommendation { display: flex; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--mcb-border-width) solid var(--border-subtle); color: var(--text-secondary); font-size: var(--qhb-type-body); line-height: var(--qhb-leading-copy); }
.qhb-recommendation .ui-icon { width: var(--mcb-icon-small); height: var(--mcb-icon-small); flex: none; margin-top: var(--space-1); color: var(--icon-violet); }
.qhb-panel-empty,
.qhb-empty { display: grid; justify-items: center; padding: var(--space-8) var(--space-5); text-align: center; }
.qhb-panel-empty.is-compact { padding-block: var(--space-5); }
.qhb-panel-empty > span,
.qhb-empty-icon { display: grid; width: var(--qhb-icon-box); height: var(--qhb-icon-box); place-items: center; border-radius: var(--mcb-radius-tab); background: color-mix(in srgb, var(--icon-violet) 8%, var(--surface-2)); color: var(--icon-violet); }
.qhb-panel-empty .ui-icon,
.qhb-empty-icon .ui-icon { width: var(--qhb-icon-size); height: var(--qhb-icon-size); }
.qhb-panel-empty strong,
.qhb-empty h2 { margin: var(--space-3) 0 0; font-size: var(--qhb-type-title); }
.qhb-panel-empty p,
.qhb-empty p { max-width: var(--qhb-empty-copy-max); margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--qhb-type-body); line-height: var(--qhb-leading-copy); }
.qhb-empty .btn { margin-top: var(--space-4); }
.qhb-empty > small { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--qhb-type-meta); }

.qhb-agent-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.qhb-agent-row {
  display: grid;
  grid-template-columns: var(--qhb-icon-box) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  padding: var(--space-3);
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--surface-2) 26%, transparent);
}
.qhb-agent-icon { display: grid; width: var(--qhb-icon-box); height: var(--qhb-icon-box); place-items: center; border-radius: var(--mcb-radius-tab); background: color-mix(in srgb, var(--icon-blue) 8%, var(--surface-1)); color: var(--icon-blue); }
.qhb-agent-icon .ui-icon { width: var(--qhb-icon-size); height: var(--qhb-icon-size); }
.qhb-agent-row > span:nth-child(2) { min-width: 0; }
.qhb-agent-row b,
.qhb-agent-row small,
.qhb-agent-row em { display: block; }
.qhb-agent-row b { font-size: var(--qhb-type-body); }
.qhb-agent-row small { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--qhb-type-label); }
.qhb-agent-row em { margin-top: var(--space-1); color: var(--danger); font-size: var(--qhb-type-label); font-style: normal; overflow-wrap: anywhere; }
.qhb-revision-note { display: grid; border-color: var(--border-subtle); background: color-mix(in srgb, var(--surface-2) 26%, transparent); }
.qhb-revision-note b { color: var(--text-primary); }

.qhb-context-card > span { color: var(--icon-blue); }
.qhb-context-card strong { display: block; margin-top: var(--space-2); overflow-wrap: anywhere; font: 700 var(--mcb-type-body)/var(--mcb-leading-panel) "Manrope", var(--font-sans); }
.qhb-context-card small { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--qhb-type-label); line-height: var(--qhb-leading-copy); }
.qhb-context-card button { margin-top: var(--space-2); padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--qhb-type-meta); cursor: pointer; }
.qhb-context-card button:hover { color: var(--text-primary); }
.qhb-coverage-card > span { color: var(--text-muted); }
.qhb-coverage-card > div { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.qhb-coverage-card p { display: grid; grid-template-columns: var(--qhb-icon-box) minmax(0, 1fr); gap: var(--space-3); align-items: center; margin: 0; }
.qhb-coverage-card p > .ui-icon { width: var(--qhb-icon-size); height: var(--qhb-icon-size); color: var(--icon-violet); }
.qhb-coverage-card b,
.qhb-coverage-card small { display: block; }
.qhb-coverage-card b { font-size: var(--qhb-type-body); }
.qhb-coverage-card small { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--qhb-type-label); line-height: var(--qhb-leading-copy); }
.qhb-shell :is(.qhb-run-row, .qhb-content-exception, .qhb-actions .btn, .qhb-campaign-cta, .qhb-empty .btn, .qhb-context-card button, .mcb-eva-mark, .mcb-suggested button):focus-visible,
.qhb-campaign-picker .field:focus-visible { outline: var(--mcb-focus-width) solid var(--focus-ring); outline-offset: var(--mcb-focus-width); }
html.reduce-transparency .qhb-hero,
html.reduce-transparency .qhb-command,
html.reduce-transparency .qhb-history,
html.reduce-transparency .qhb-decision,
html.reduce-transparency .qhb-panel { background: var(--surface-1-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 1180px) {
  .qhb-workspace { grid-template-columns: var(--qhb-history-condensed-width) minmax(0, 1fr); }
  .qhb-run-row { display: grid; }
  .qhb-run-row > span:last-child { justify-items: start; text-align: left; }
}
@media (max-width: 980px) {
  .qhb-workspace { grid-template-columns: var(--qhb-history-width) minmax(0, 1fr); }
  .qhb-run-row { display: flex; }
  .qhb-run-row > span:last-child { justify-items: end; text-align: right; }
}
@media (max-width: 767px) {
  .qhb-frame { padding-top: var(--space-2); padding-bottom: calc(var(--space-10) * 2); }
  .qhb-hero { min-height: 0; padding: var(--space-5) var(--space-4); }
  .qhb-hero h1 { font-size: var(--mcb-type-hero-min); }
  .qhb-command { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .qhb-campaign-picker { width: 100%; }
  .qhb-campaign-cta { width: 100%; min-height: var(--qhb-touch-target); }
  .qhb-workspace { grid-template-columns: minmax(0, 1fr); }
  .qhb-history { padding: var(--space-4); overflow: hidden; }
  .qhb-history > div { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .qhb-run-row { flex: 0 0 var(--qhb-run-mobile-width); scroll-snap-align: start; }
  .qhb-decision,
  .qhb-panel { padding: var(--space-4); }
}
@media (max-width: 480px) {
  .qhb-hero { display: grid; }
  .qhb-scope { width: 100%; justify-content: center; }
  .qhb-decision > header,
  .qhb-panel-head { display: grid; }
  .qhb-run-time { justify-items: start; text-align: left; }
  .qhb-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qhb-counts > div + div { border-left: 0; }
  .qhb-counts > div:nth-child(even) { border-left: var(--mcb-border-width) solid var(--border-subtle); }
  .qhb-counts > div:nth-child(n + 3) { border-top: var(--mcb-border-width) solid var(--border-subtle); }
  .qhb-actions { display: grid; }
  .qhb-actions .btn,
  .qhb-empty .btn { width: 100%; min-height: var(--qhb-touch-target); }
  .qhb-content-exception { grid-template-columns: var(--qhb-icon-box) minmax(0, 1fr); }
  .qhb-content-exception > span:last-child { grid-column: 2; }
  .qhb-finding > header { display: grid; }
  .qhb-finding p { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .qhb-agent-row { grid-template-columns: var(--qhb-icon-box) minmax(0, 1fr); }
  .qhb-agent-row > .pill { grid-column: 2; justify-self: start; }
  .qhb-shell .mcb-suggested button,
  .qhb-context-card button { min-height: var(--qhb-touch-target); }
  .qhb-shell .mcb-eva .eva-chat-input { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qhb-shell .mcb-eva .eva-chat-btn { width: var(--qhb-touch-target); height: var(--qhb-touch-target); }
}
@media (max-width: 360px) {
  .qhb-command-copy h2 { white-space: normal; overflow-wrap: anywhere; }
  .qhb-history { padding-inline: var(--space-3); }
  .qhb-run-row { flex-basis: var(--qhb-run-compact-width); }
}