@pythia-software/query-table-ui 0.5.0 → 0.6.0

package/dist/theme.css

@@ -1,4 +1,4 @@
-/* src/theme.css */
+/* src/baseTheme.css */
 :root {
   --qt-font-size: 14px;
   --qt-border: #d0d7de;
@@ -1218,6 +1218,59 @@
 .qt-cm-item:disabled:hover {
   background: transparent;
 }
+.qt-cm-submenu-wrap {
+  position: relative;
+}
+.qt-cm-submenu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.qt-cm-submenu-trigger .qt-icon {
+  color: var(--qt-muted);
+}
+.qt-cm-item--open {
+  background: var(--qt-header-bg);
+}
+.qt-cm-submenu {
+  position: absolute;
+  top: -4px;
+  left: calc(100% + 4px);
+  z-index: 1;
+  background: #fff;
+  border: 1px solid var(--qt-border);
+  border-radius: var(--qt-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 4px;
+  box-sizing: border-box;
+}
+.qt-cm-submenu::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -6px;
+  width: 6px;
+}
+.qt-cm-submenu--left {
+  left: auto;
+  right: calc(100% + 4px);
+}
+.qt-cm-submenu--left::before {
+  left: auto;
+  right: -6px;
+}
+.qt-sheet .qt-cm-submenu {
+  position: static;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0 0 4px 12px;
+}
+.qt-sheet .qt-cm-submenu::before {
+  display: none;
+}
 .qt-cm-item code {
   background: var(--qt-border-subtle);
   padding: 1px 4px;
@@ -2208,39 +2261,208 @@
   padding: 4px 10px;
   font-size: 11px;
 }
+.qt-formula-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.qt-formula-editor {
+  flex: 1 1 320px;
+  min-width: 0;
+}
 .qt-function-library {
-  margin: 10px 0;
+  flex: 1 1 260px;
+  min-width: 0;
+  max-width: 330px;
+  padding: 12px;
+  border: 1px solid var(--qt-border, #dbe1e8);
+  border-radius: 8px;
+  background: var(--qt-bg-muted, #f8fafc);
   font-size: 12px;
 }
-.qt-function-library summary {
-  cursor: pointer;
-  margin-bottom: 8px;
+.qt-function-library h4 {
+  margin: 0 0 6px;
+  font-size: 14px;
+}
+.qt-function-search,
+.qt-function-filters label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-weight: 600;
+}
+.qt-function-search .qt-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin-bottom: 10px;
+}
+.qt-function-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.qt-function-filters label {
+  flex: 1 1 110px;
+  min-width: 0;
+}
+.qt-function-filters select {
+  width: 100%;
+  min-width: 0;
+  padding: 6px;
+  border: 1px solid var(--qt-border, #dbe1e8);
+  border-radius: 5px;
+  color: inherit;
+  background: var(--qt-bg, #fff);
+  font: inherit;
+}
+.qt-select-editor .qt-function-count,
+.qt-select-editor .qt-function-concept {
+  margin: 10px 0 6px;
+  color: var(--qt-muted, #64748b);
 }
 .qt-function-list {
-  max-height: 190px;
-  overflow: auto;
+  position: relative;
+  max-height: 320px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   margin: 8px 0;
 }
 .qt-function-list button {
   display: flex;
   flex-direction: column;
   text-align: left;
-  gap: 3px;
-  padding: 8px;
-  background: transparent;
+  gap: 5px;
+  padding: 10px 8px;
   border: 0;
   border-bottom: 1px solid var(--qt-border, #dbe1e8);
   width: 100%;
   color: inherit;
+  background: transparent;
   cursor: pointer;
+  border-radius: 4px;
+}
+.qt-function-list button:hover,
+.qt-function-list button[aria-selected=true] {
+  background: var(--qt-accent-bg, #edf3ff);
+}
+.qt-function-list button:focus-visible {
+  outline: 2px solid var(--qt-accent, #285cc4);
+  outline-offset: -2px;
+}
+.qt-function-card-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  width: 100%;
+}
+.qt-function-card-title > span {
+  font-size: 10px;
+  color: var(--qt-muted, #64748b);
+}
+.qt-function-list code {
+  font-size: 11px;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
-.qt-function-list small {
+.qt-function-list small,
+.qt-function-card-concept {
   color: var(--qt-muted, #64748b);
 }
-.qt-function-help {
-  padding: 10px;
-  max-width: 400px;
-  font: 12px/1.5 system-ui;
+.qt-function-card-concept {
+  font-size: 10px;
+}
+.qt-select-editor .qt-function-insert-hint,
+.qt-select-editor .qt-function-empty {
+  margin: 8px 0 0;
+  color: var(--qt-muted, #64748b);
+  font-size: 11px;
+}
+@media (max-width: 1100px) {
+  .qt-function-library {
+    max-width: none;
+  }
+}
+@media (max-width: 760px) {
+  .qt-formula-editor,
+  .qt-function-library {
+    flex-basis: 100%;
+    max-width: none;
+  }
+  .qt-function-list {
+    max-height: 240px;
+  }
+}
+.qt-formula-input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 130px;
+  max-height: 260px;
+  resize: vertical;
+  padding: 12px;
+  border: 1px solid var(--qt-border, #cbd5e1);
+  border-radius: 6px;
+  background: var(--qt-bg, #fff);
+  color: var(--qt-text, inherit);
+  font: 13px/1.6 ui-monospace, monospace;
+}
+.qt-formula-input:focus-visible {
+  outline: 2px solid var(--qt-accent, #285cc4);
+  outline-offset: 2px;
+}
+.qt-formula-tools {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 6px;
+  color: var(--qt-muted, #64748b);
+  font-size: 11px;
+}
+.qt-formula-completions {
+  margin-top: 8px;
+  border: 1px solid var(--qt-border, #cbd5e1);
+  border-radius: 6px;
+  background: var(--qt-bg, #fff);
+  font-size: 12px;
+}
+.qt-formula-completions ul {
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  max-height: 180px;
+  overflow: auto;
+}
+.qt-formula-completions li {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 7px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.qt-formula-completions li:hover,
+.qt-formula-completions li[aria-selected=true] {
+  background: var(--qt-accent-bg, #edf3ff);
+}
+.qt-formula-completions small {
+  color: var(--qt-muted, #64748b);
+}
+.qt-formula-completions p {
+  margin: 0;
+  padding: 8px;
+  border-top: 1px solid var(--qt-border, #cbd5e1);
+  color: var(--qt-muted, #64748b);
+  overflow-wrap: anywhere;
+}
+.qt-formula-editor > .qt-formula-error {
+  margin-bottom: 10px;
+  font-size: 12px;
 }
 .qt-definition-actions {
   display: flex;
@@ -2423,8 +2645,7 @@
   .qt-select-editor .qt-input,
   .qt-select-editor textarea,
   .qt-select-editor .qt-preview-controls input,
-  .qt-select-editor .qt-preview-controls select,
-  .qt-select-editor .cm-editor {
+  .qt-select-editor .qt-preview-controls select {
     color: var(--qt-text);
     background: var(--qt-bg-muted);
     border-color: var(--qt-border);
@@ -3579,4 +3800,1604 @@
     border-radius: var(--qt-radius) var(--qt-radius) 0 0;
   }
 }
+
+/* src/metrics.css */
+.qt-metric.qt-metric {
+  color: var(--qt-metric-text, var(--qt-text, #24292f));
+  background: var(--qt-metric-surface, var(--qt-bg, #fff));
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.qt-metric.qt-metric--chart {
+  flex: 1 1 28rem;
+  display: flex;
+  flex-direction: column;
+  width: 28rem;
+  min-height: 20rem;
+}
+.qt-metric-chart-layout {
+  display: flex;
+  flex: 1 0 12rem;
+  min-height: 8rem;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.qt-metric-plot {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  min-height: 8rem;
+}
+.qt-metric-plot svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.qt-metric-axis {
+  fill: var(--qt-metric-muted, var(--qt-muted, #68717d));
+  font: 0.6875rem system-ui, sans-serif;
+}
+.qt-metric-grid {
+  stroke: var(--qt-metric-grid, var(--qt-border, #d8dee4));
+  stroke-width: 1;
+}
+.qt-metric-mark {
+  outline: none;
+}
+.qt-metric-mark:focus-visible {
+  outline: 2px solid var(--qt-metric-accent, var(--qt-accent, #3979c3));
+  outline-offset: 2px;
+}
+.qt-metric-legend {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  gap: 0.4rem;
+  padding: 0;
+  margin: 0;
+  max-width: 35%;
+  max-height: 16rem;
+  overflow: auto;
+  font-size: 0.75rem;
+}
+.qt-metric-legend li {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  overflow-wrap: anywhere;
+}
+.qt-metric-swatch {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 0.1rem;
+}
+.qt-metric-legend-left {
+  flex-direction: row-reverse;
+}
+.qt-metric-legend-top {
+  flex-direction: column-reverse;
+}
+.qt-metric-legend-bottom {
+  flex-direction: column;
+}
+.qt-metric-legend-top .qt-metric-legend,
+.qt-metric-legend-bottom .qt-metric-legend {
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 100%;
+  max-height: 4rem;
+}
+.qt-metric-note {
+  color: var(--qt-metric-muted, var(--qt-muted, #68717d));
+  font-size: 0.6875rem;
+  margin: 0.4rem 0;
+}
+.qt-metric-tooltip {
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+  padding: 0.5rem 0.625rem;
+  background: var(--qt-metric-surface, var(--qt-bg, #fff));
+  color: var(--qt-metric-text, var(--qt-text, #24292f));
+  border: 1px solid var(--qt-metric-grid, var(--qt-border, #d8dee4));
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  box-shadow: 0 0.15rem 0.5rem #0002;
+}
+.qt-metric-message {
+  font-size: 0.8125rem;
+  padding: 0.75rem;
+}
+.qt-metric-format-error,
+.qt-metrics-error {
+  color: var(--qt-metric-error, var(--qt-danger, #c23934));
+}
+.qt-metric.qt-metric {
+  position: relative;
+}
+.qt-metric-tooltip {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0.5rem;
+  bottom: 2rem;
+  pointer-events: none;
+  max-height: 80%;
+  overflow: auto;
+}
+.qt-metric .qt-metric-big-value,
+.qt-metric .qt-metric-bar-value {
+  color: var(--qt-metric-text, var(--qt-text, #24292f));
+}
+.qt-metric .qt-metric-bar-fill {
+  background: var(--qt-metric-accent, var(--qt-accent, #3979c3));
+}
+.qt-metric .qt-metric-pivot thead th,
+.qt-metric .qt-metric-flat thead th {
+  background: var(--qt-metric-surface, var(--qt-header-bg, #fff));
+}
+.qt-metrics {
+  min-width: 0;
+  overflow-x: auto;
+}
+.qt-metric.qt-metric {
+  border-radius: 8px;
+  padding: 10px 12px;
+  box-shadow: none;
+  gap: 6px;
+}
+.qt-metric .qt-metric-head {
+  flex-shrink: 0;
+  align-items: baseline;
+}
+.qt-metric .qt-metric-title {
+  font-size: 12px;
+  font-weight: 600;
+}
+.qt-metric .qt-metric-by {
+  font-size: 10px;
+}
+.qt-metric .qt-metric-big {
+  text-align: center;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+}
+.qt-metric .qt-metric-big-value {
+  font-size: clamp(24px, 2.125rem, 34px);
+  font-weight: 600;
+  line-height: 1.2;
+}
+.qt-metric .qt-metric-big-sub {
+  font-size: 11px;
+  color: var(--qt-metric-muted, var(--qt-muted));
+}
+.qt-metric .qt-metric-pivot,
+.qt-metric .qt-metric-flat {
+  width: 100%;
+}
+.qt-metric .qt-metric-pivot thead th,
+.qt-metric .qt-metric-flat thead th {
+  background: var(--qt-header-bg, #f6f8fa);
+  color: var(--qt-metric-muted, var(--qt-muted));
+  font-weight: 500;
+}
+.qt-metric .qt-metric-pivot-wrap {
+  min-height: 0;
+  overflow: auto;
+}
+.qt-metric .qt-metric-legend {
+  font-size: 10px;
+  gap: 6px;
+  max-width: 40%;
+}
+.qt-metric .qt-metric-legend li {
+  align-items: center;
+  gap: 5px;
+}
+.qt-metric .qt-metric-legend .qt-metric-swatch {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.qt-metric-legend-top .qt-metric-legend,
+.qt-metric-legend-bottom .qt-metric-legend {
+  max-width: 100%;
+}
+.qt-metric-loading {
+  padding: 12px;
+}
+.qt-metric-empty {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  font-style: normal;
+}
+.qt-metric .qt-metrics-error {
+  margin: 6px 0;
+  padding: 10px;
+  background: var(--qt-fail-bg, #ffebe9);
+  border-radius: 6px;
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.qt-metrics {
+  position: relative;
+}
+.qt-metric.qt-metric {
+  position: relative;
+}
+.qt-metric-edit,
+.qt-metrics-edit {
+  position: absolute;
+  right: 0.35rem;
+  top: 0.35rem;
+  z-index: 1;
+  opacity: 0;
+  pointer-events: none;
+  background: transparent;
+}
+.qt-btn.qt-metric-edit,
+.qt-btn.qt-metrics-edit {
+  color: var(--qt-metric-muted, var(--qt-muted, #8c959f));
+  border: 1px dotted var(--qt-border, #d0d7de);
+}
+.qt-btn.qt-metric-edit:hover,
+.qt-btn.qt-metrics-edit:hover {
+  color: var(--qt-metric-muted, var(--qt-muted, #8c959f));
+  border-color: var(--qt-border, #d0d7de);
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metrics-edit {
+  top: -0.75rem;
+  z-index: 3;
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric:hover > .qt-metric-edit,
+.qt-metric:focus-within > .qt-metric-edit,
+.qt-metrics:hover > .qt-metrics-edit,
+.qt-metrics:focus-within > .qt-metrics-edit {
+  opacity: 1;
+  pointer-events: auto;
+}
+.qt-metric:has(> .qt-metric-edit) .qt-metric-head {
+  padding-right: 1.75rem;
+}
+@media (hover: none) {
+  .qt-metric-edit,
+  .qt-metrics-edit {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.qt-request-activity {
+  padding: 0.75rem;
+  margin-block: 0.5rem;
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+}
+.qt-request-activity-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+.qt-request-activity-head .qt-btn {
+  margin-left: auto;
+}
+.qt-request-activity-scroll {
+  overflow: auto;
+  max-height: 18rem;
+}
+.qt-request-activity table {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+}
+.qt-request-activity th,
+.qt-request-activity td {
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--qt-border, #d0d7de);
+  overflow-wrap: anywhere;
+}
+.qt-request-activity [data-status=error] {
+  color: var(--qt-danger, #cf222e);
+}
+
+/* src/metricsEditor.css */
+.qt-metrics-editor.qt-modal {
+  width: min(1560px, calc(100vw - 48px));
+  height: min(900px, calc(100dvh - 48px));
+  max-width: calc(100vw - 48px);
+  max-height: calc(100dvh - 48px);
+  min-width: min(760px, calc(100vw - 48px));
+  min-height: min(400px, calc(100dvh - 48px));
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 24px 90px #1f23283b;
+  padding: 0;
+  resize: both;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.qt-metrics-editor *,
+.qt-metrics-editor *::before,
+.qt-metrics-editor *::after {
+  box-sizing: border-box;
+}
+.qt-metrics-editor :is(input, select, textarea) {
+  font: inherit;
+  font-weight: 400;
+  color: inherit;
+  background: var(--qt-bg, #fff);
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 6px;
+  padding: 6px 9px;
+  min-width: 0;
+  width: 100%;
+}
+.qt-metrics-editor :is(input, select) {
+  min-height: 34px;
+}
+.qt-metrics-editor input[type=checkbox] {
+  width: 14px;
+  height: 14px;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  accent-color: var(--qt-accent, #0969da);
+}
+.qt-metrics-editor button {
+  font: inherit;
+}
+.qt-metrics-editor .qt-btn {
+  height: auto;
+  min-height: 30px;
+  padding: 5px 9px;
+  justify-content: center;
+  white-space: nowrap;
+}
+.qt-metrics-editor button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.qt-metrics-editor .qt-btn:hover:not(:disabled) {
+  background: var(--qt-header-bg, #f6f8fa);
+  border-color: var(--qt-border, #d0d7de);
+}
+.qt-metrics-editor .qt-btn-primary {
+  background: var(--qt-accent, #0969da);
+  border-color: var(--qt-accent, #0969da);
+  color: #fff;
+  font-weight: 600;
+}
+.qt-metrics-editor .qt-btn-primary:hover:not(:disabled) {
+  background: var(--qt-accent, #0969da);
+  border-color: var(--qt-accent, #0969da);
+  filter: brightness(0.9);
+}
+.qt-metrics-editor :is(input, select, textarea, button, summary, [role=separator]):focus-visible {
+  outline: 2px solid var(--qt-accent, #0969da);
+  outline-offset: 2px;
+}
+.qt-metrics-editor label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 0;
+}
+.qt-metrics-editor label:has(> input[type=checkbox]) {
+  flex-direction: row;
+  align-items: center;
+  font-weight: 400;
+}
+.qt-metrics-editor-header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 18px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--qt-border, #d0d7de);
+}
+.qt-metrics-editor-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.qt-metrics-editor-header > label {
+  width: 142px;
+}
+.qt-metrics-editor-header select {
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metrics-editor-header .qt-metric-close {
+  border: 0;
+  background: transparent;
+  width: 32px;
+  padding: 0;
+  font-size: 22px;
+  font-weight: 400;
+}
+.qt-metrics-editor-context {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: 16px;
+  padding: 9px 22px;
+  background: var(--qt-header-bg, #f6f8fa);
+  color: var(--qt-muted, #656d76);
+  font-size: 12px;
+  border-bottom: 1px solid var(--qt-border, #d0d7de);
+}
+.qt-metrics-editor-context b {
+  color: var(--qt-text, #1f2328);
+  font-weight: 500;
+}
+.qt-metric-workspace {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.qt-metric-workspace > :is(aside, section) {
+  padding: 18px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+  min-width: 0;
+}
+.qt-metric-workspace h3 {
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0 0 16px;
+  font-weight: 600;
+  color: var(--qt-text, #1f2328);
+}
+.qt-metric-workspace > .qt-metric-library,
+.qt-metric-workspace > .qt-metric-reference {
+  background: var( --qt-editor-library-bg, color-mix(in srgb, var(--qt-bg, #fff) 60%, var(--qt-header-bg, #f6f8fa)) );
+  padding-inline: 14px;
+}
+.qt-metric-pane-separator {
+  position: relative;
+  background: var(--qt-header-bg, #f6f8fa);
+  border-inline: 1px solid var(--qt-border, #d0d7de);
+  cursor: col-resize;
+  touch-action: none;
+}
+.qt-metric-pane-separator::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 28px;
+  border-radius: 2px;
+  background: var(--qt-border, #d0d7de);
+  top: calc(50% - 14px);
+  left: 1px;
+}
+.qt-metric-pane-separator:is(:hover, :focus-visible) {
+  background: var(--qt-accent-bg, #ddf4ff);
+}
+.qt-metric-pane-separator:focus-visible {
+  outline-offset: -2px;
+}
+.qt-metric-library h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-library .qt-reorder-list {
+  padding: 0;
+  margin: 0 0 12px;
+  overflow: visible;
+}
+.qt-metric-library .qt-reorder-item {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 0;
+  margin: 4px 0;
+  min-height: 0;
+  display: flex;
+  gap: 0;
+  background: transparent;
+  transition: background-color 0.12s, border-color 0.12s;
+}
+.qt-metric-library-chip {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: start;
+  padding: 9px 26px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-height: 54px;
+  cursor: pointer;
+  border-radius: inherit;
+}
+.qt-metric-library-chip strong {
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.qt-metric-library-chip span {
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-dirty-dot {
+  display: inline-block;
+  vertical-align: middle;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  margin-inline-start: 6px;
+  background: var(--qt-accent, #0969da);
+}
+.qt-metric-library .qt-reorder-item:is(:hover, :focus-within) {
+  background: var(--qt-cell-hover, #f0f7ff);
+  border-color: var(--qt-border-subtle, #eaeef2);
+}
+.qt-metric-library .qt-reorder-item.qt-metric-library-selected {
+  border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
+  background: var(--qt-accent-bg, #ddf4ff);
+}
+.qt-metric-library .qt-reorder-handle {
+  position: absolute;
+  inset-inline-start: 3px;
+  top: 10px;
+  z-index: 1;
+  opacity: 0;
+}
+.qt-metrics-editor .qt-reorder-handle {
+  width: 20px;
+  min-width: 20px;
+  min-height: 30px;
+  padding: 0;
+  border-radius: 4px;
+  transition: opacity 0.12s;
+}
+.qt-metrics-editor .qt-reorder-handle .qt-icon {
+  width: 12px;
+  height: 12px;
+}
+.qt-metric-library .qt-reorder-item:is(:hover, :focus-within, .qt-metric-library-selected) > .qt-reorder-handle {
+  opacity: 1;
+}
+.qt-metric-library .qt-metric-create {
+  width: 100%;
+  color: var(--qt-accent, #0969da);
+  border-style: dashed;
+  background: transparent;
+}
+.qt-metric-actions {
+  position: absolute;
+  top: 10px;
+  inset-inline-end: 5px;
+  z-index: 5;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.qt-metric-actions summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 18px;
+  line-height: 24px;
+  border-radius: 4px;
+}
+.qt-metric-actions summary::-webkit-details-marker {
+  display: none;
+}
+.qt-metric-actions summary:hover {
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-actions > div {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 30px;
+  width: 155px;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  background: var(--qt-bg, #fff);
+  border: 1px solid var(--qt-border, #d0d7de);
+  box-shadow: 0 8px 25px #1f232833;
+  border-radius: 7px;
+}
+.qt-metric-actions button {
+  text-align: start;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  padding: 7px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.qt-metric-actions button:hover {
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-actions button.qt-metric-remove {
+  color: var(--qt-fail-fg, #cf222e);
+}
+.qt-reorder-item:is(:hover, :focus-within, .qt-metric-library-selected) .qt-metric-actions,
+.qt-metric-actions[open] {
+  opacity: 1;
+}
+.qt-metric-definition {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.qt-metric-definition > label {
+  margin-bottom: 18px;
+  font-weight: 600;
+}
+.qt-metric-expression-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.qt-metric-expression-heading strong {
+  font-weight: 600;
+}
+.qt-metric-mode {
+  display: flex;
+  gap: 6px;
+}
+.qt-metric-mode button {
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 6px;
+  background: var(--qt-bg, #fff);
+  color: inherit;
+  font-size: 11px;
+  min-height: 26px;
+  padding: 3px 8px;
+  cursor: pointer;
+}
+.qt-metric-mode button[aria-pressed=true] {
+  background: var(--qt-accent-bg, #ddf4ff);
+  border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
+  color: var(--qt-accent, #0969da);
+}
+.qt-metric-basic {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+.qt-metric-basic select {
+  flex: 1;
+  width: 50%;
+}
+.qt-metrics-editor .qt-formula-layout {
+  gap: 0;
+  margin: 0 0 12px;
+  flex-shrink: 0;
+}
+.qt-metrics-editor .qt-formula-input {
+  font:
+    12px/1.8 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  min-height: 104px;
+  max-height: 260px;
+  padding: 12px;
+}
+.qt-metrics-editor .qt-formula-tools {
+  font-size: 10px;
+  margin-top: 5px;
+}
+.qt-metric-definition > strong {
+  font-size: 12px;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+.qt-metric-validation {
+  color: var(--qt-pass-fg, #1a7f37);
+  margin: 0 0 18px;
+  font-size: 11px;
+}
+.qt-metric-settings {
+  border: 0;
+  border-top: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 0;
+  flex-shrink: 0;
+}
+.qt-metric-settings > summary {
+  cursor: pointer;
+  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  list-style: none;
+  font-size: 12px;
+}
+.qt-metric-settings > summary::-webkit-details-marker {
+  display: none;
+}
+.qt-metric-settings > summary::before {
+  content: "\25b8";
+  font-size: 10px;
+  color: var(--qt-muted, #656d76);
+  flex-shrink: 0;
+}
+.qt-metric-settings[open] > summary::before {
+  content: "\25be";
+}
+.qt-metric-settings > summary strong {
+  font-weight: 600;
+  white-space: nowrap;
+}
+.qt-metric-settings > summary span {
+  color: var(--qt-muted, #656d76);
+  font-size: 10px;
+  margin-inline-start: auto;
+  max-width: 58%;
+  text-align: end;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.qt-metric-settings > div {
+  padding: 0 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.qt-metric-scope {
+  display: flex;
+  background: var(--qt-header-bg, #f6f8fa);
+  border: 1px solid var(--qt-border, #d0d7de);
+  padding: 3px;
+  border-radius: 7px;
+  gap: 3px;
+}
+.qt-metric-scope button {
+  flex: 1;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  padding: 5px 8px;
+  min-height: 30px;
+  cursor: pointer;
+  color: inherit;
+}
+.qt-metric-scope button[aria-pressed=true] {
+  background: var(--qt-bg, #fff);
+  box-shadow: 0 1px 3px #1f23281a;
+  color: var(--qt-accent, #0969da);
+}
+.qt-metric-help {
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+  margin: 0;
+  font-weight: 400;
+}
+.qt-metric-group-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.qt-metric-group-row select {
+  min-width: 0;
+  flex: 1;
+}
+.qt-metric-sort-row {
+  display: grid;
+  grid-template-columns: minmax(100px, 1fr) minmax(90px, 0.9fr) 26px;
+  gap: 6px;
+}
+.qt-metric-sort-row select:nth-child(3) {
+  grid-row: 2;
+  grid-column: 1 / 3;
+}
+.qt-metric-sort-row button {
+  grid-row: 1;
+  grid-column: 3;
+}
+.qt-metric-group-row button,
+.qt-metric-sort-row button {
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--qt-muted, #656d76);
+  cursor: pointer;
+  padding: 4px;
+  min-height: 28px;
+}
+.qt-metric-group-row button:hover,
+.qt-metric-sort-row button:hover {
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-size-controls {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.qt-metric-size-controls label {
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+  font-weight: 400;
+  white-space: nowrap;
+}
+.qt-metric-format-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px;
+  align-items: start;
+  gap: 8px;
+}
+.qt-metric-format-controls--temporal {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.qt-metric-format-controls label {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-format-controls select {
+  padding-inline: 6px;
+}
+.qt-metric-temporal-controls {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.qt-metric-temporal-controls label:has(input) {
+  grid-column: 1 / -1;
+}
+.qt-metric-format-example {
+  grid-column: 1 / -1;
+  background: var(--qt-header-bg, #f6f8fa);
+  border: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+  overflow-wrap: anywhere;
+}
+.qt-metric-format-example strong {
+  display: block;
+  margin-top: 2px;
+  color: var(--qt-text, #1f2328);
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.qt-metric-list-controls {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.qt-metric-reference {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.qt-metric-reference > * {
+  flex-shrink: 0;
+}
+.qt-metric-reference h3 {
+  margin-bottom: 0;
+}
+.qt-metric-reference > select {
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-reference-list {
+  display: grid;
+  gap: 0;
+}
+.qt-metric-reference-columns,
+.qt-metric-reference-item {
+  display: grid;
+  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.2fr);
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.375rem 0.25rem;
+  min-width: 0;
+}
+.qt-metric-reference-columns {
+  color: var(--qt-muted, #656d76);
+  font-size: 10px;
+  border-bottom: 1px solid var(--qt-border, #d0d7de);
+}
+.qt-metric-reference-item {
+  text-align: start;
+  border: 0;
+  border-bottom: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.qt-metric-reference-item:hover {
+  background: var(--qt-cell-hover, #f0f7ff);
+}
+.qt-metric-reference-item > * {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qt-metric-reference-item strong {
+  font-size: 11px;
+  font-weight: 500;
+}
+.qt-metric-reference-item code,
+.qt-metric-reference-item span {
+  font-size: 10px;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-reset-layout {
+  margin-inline-start: auto;
+}
+.qt-metric-discard-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+.qt-metric-discard-actions > button {
+  flex: 0 0 auto;
+}
+.qt-metric-workspace > .qt-metric-live-preview {
+  background: var(--qt-bg, #fff);
+}
+.qt-metric-preview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.qt-metric-preview-heading h3 {
+  margin: 0;
+}
+.qt-metric-preview-status {
+  border: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 10px;
+  color: var(--qt-muted, #656d76);
+  background: var(--qt-header-bg, #f6f8fa);
+  white-space: nowrap;
+}
+.qt-metric-preview-scope {
+  font-size: 12px;
+  margin: 0 0 4px;
+}
+.qt-metric-preview-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin: 12px 0 10px;
+}
+.qt-metric-preview-controls label {
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 400;
+}
+.qt-metric-preview-controls input {
+  width: 64px;
+  min-height: 28px;
+  padding: 4px 6px;
+}
+.qt-metric-preview-controls .qt-btn {
+  font-size: 11px;
+  min-height: 28px;
+  padding: 4px 7px;
+}
+.qt-metric-preview-controls .qt-metric-refresh {
+  font-size: 16px;
+  width: 28px;
+  padding: 0;
+}
+.qt-metric-preview-card {
+  resize: both;
+  overflow: auto;
+  min-width: 100px;
+  min-height: 60px;
+  max-width: 1800px;
+  max-height: 1000px;
+  padding: 0;
+  box-sizing: border-box;
+}
+.qt-metric-preview-card > .qt-metric {
+  width: 100% !important;
+  height: 100% !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  margin: 0;
+}
+.qt-metric-preview-card + .qt-metric-help {
+  margin-top: 12px;
+}
+.qt-metric-live-preview > .qt-muted {
+  font-size: 11px;
+  margin: 10px 0 16px;
+}
+.qt-metric-inspection-expression {
+  background: var(--qt-header-bg, #f6f8fa);
+  border: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 6px;
+  padding: 10px;
+  font-size: 11px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.qt-metric-inspection-values {
+  background: var(--qt-header-bg, #f6f8fa);
+  border: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 0;
+  font-size: 11px;
+}
+.qt-metric-inspection-values > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 4px 0;
+}
+.qt-metric-inspection-values dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  overflow-wrap: anywhere;
+}
+.qt-metrics-editor-footer {
+  padding: 14px 22px;
+  border-top: 1px solid var(--qt-border, #d0d7de);
+  background: var(--qt-header-bg, #f6f8fa);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+.qt-metrics-editor-footer > span {
+  flex: 1;
+  font-size: 12px;
+}
+.qt-metrics-editor-footer .qt-btn {
+  font-size: 14px;
+  min-height: 36px;
+}
+.qt-metric-editor-error {
+  background: var(--qt-fail-bg, #ffebe9);
+  color: var(--qt-fail-fg, #cf222e);
+  border: 1px solid color-mix(in srgb, var(--qt-fail-fg, #cf222e) 25%, var(--qt-bg, #fff));
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  margin: 0 0 12px;
+  overflow-wrap: anywhere;
+}
+.qt-metrics-editor > .qt-metric-editor-error {
+  margin: 8px 18px;
+  flex-shrink: 0;
+}
+.qt-metric-layout-editor {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-canvas-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 18px 20px 12px;
+  flex-shrink: 0;
+}
+.qt-metric-canvas-heading {
+  margin-inline-end: auto;
+}
+.qt-metric-canvas-heading strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.qt-metric-canvas-presets {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 6px 8px;
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 8px;
+  background: var(--qt-bg, #fff);
+}
+.qt-metric-canvas-presets label {
+  flex-direction: row;
+  align-items: center;
+  font-weight: 400;
+}
+.qt-metric-canvas-presets input {
+  width: 84px;
+}
+.qt-metric-canvas-presets span {
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-canvas-presets .qt-btn {
+  min-height: 34px;
+  font-size: 11px;
+}
+.qt-metric-canvas-presets button[aria-pressed=true] {
+  background: var(--qt-accent-bg, #ddf4ff);
+  border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
+  color: var(--qt-accent, #0969da);
+}
+.qt-metric-layout-controls {
+  display: flex;
+  align-items: end;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 12px;
+  margin: 0 20px 14px;
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 8px;
+  background: var(--qt-bg, #fff);
+  flex-shrink: 0;
+}
+.qt-metric-layout-controls label {
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+  font-weight: 400;
+  gap: 4px;
+}
+.qt-metric-layout-controls :is(.qt-metric-layout-picker, .qt-metric-layout-name) {
+  flex: 1;
+  min-width: 160px;
+}
+.qt-metric-layout-controls .qt-metric-size-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.qt-metric-layout-controls .qt-metric-size-controls label {
+  width: 86px;
+}
+.qt-metric-layout-controls > .qt-btn {
+  min-height: 34px;
+}
+.qt-metric-canvas-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 12px;
+  margin: 0 20px;
+  border: 1px solid var(--qt-border, #d0d7de);
+  border-bottom: 0;
+  border-radius: 8px 8px 0 0;
+  background: var(--qt-border-subtle, #eaeef2);
+}
+.qt-metric-layout-canvas {
+  min-height: 100%;
+  max-width: none;
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-layout-items {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+}
+.qt-metric-layout-items > .qt-reorder-item {
+  position: relative;
+  padding: 0;
+  display: block;
+  border: 0;
+  background: transparent;
+  max-width: 100%;
+  outline: 1px solid transparent;
+  border-radius: 8px;
+  transition: outline-color 0.12s;
+}
+.qt-metric-layout-items > .qt-reorder-item.qt-metric-layout-selected {
+  outline-color: var(--qt-accent, #0969da);
+}
+.qt-metric-layout-items > .qt-reorder-item > .qt-reorder-handle {
+  position: absolute;
+  z-index: 5;
+  top: 8px;
+  inset-inline-start: 4px;
+  opacity: 0;
+}
+.qt-metric-layout-items > .qt-reorder-item:is(:hover, :focus-within) > .qt-reorder-handle {
+  opacity: 1;
+}
+.qt-metric-layout-card {
+  height: 100%;
+  width: 100%;
+}
+.qt-metric-layout-card > .qt-metric {
+  width: 100% !important;
+  height: 100% !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
+.qt-metric-layout-card .qt-metric-head {
+  padding-inline-end: 22px;
+}
+.qt-metric-layout-card .qt-metric-title {
+  padding-inline-start: 0;
+  transition: padding 0.12s;
+}
+.qt-reorder-item:is(:hover, :focus-within) .qt-metric-layout-card .qt-metric-title {
+  padding-inline-start: 14px;
+}
+.qt-metrics-editor .qt-metric--chart {
+  min-height: 0;
+}
+.qt-metrics-editor .qt-metric-chart-layout {
+  min-height: 80px;
+  flex: 1 0 80px;
+}
+.qt-metrics-editor .qt-metric-plot {
+  min-height: 80px;
+}
+@media (max-width: 1000px) {
+  .qt-metric-canvas-controls {
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px;
+  }
+  .qt-metric-layout-controls {
+    margin-inline: 12px;
+  }
+  .qt-metric-canvas-scroll {
+    margin-inline: 12px;
+  }
+}
+@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
+  .qt-metrics-editor.qt-modal.qt-sheet {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    height: 100%;
+    max-height: 100%;
+    min-height: 0;
+    border-radius: 12px 12px 0 0;
+    resize: none;
+  }
+  .qt-metrics-editor-header {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 12px;
+  }
+  .qt-metrics-editor-header h2 {
+    font-size: 16px;
+  }
+  .qt-metrics-editor-header > label {
+    flex: 1;
+    width: auto;
+  }
+  .qt-metrics-editor-header > .qt-btn:not(.qt-metric-close) {
+    display: none;
+  }
+  .qt-metrics-editor-header .qt-metric-close {
+    min-height: 34px;
+  }
+  .qt-metrics-editor-context {
+    gap: 12px;
+    padding: 8px 12px;
+    font-size: 11px;
+  }
+  .qt-metrics-editor-footer {
+    gap: 8px;
+    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
+  }
+  .qt-metrics-editor-footer > span {
+    font-size: 10px;
+  }
+  .qt-metrics-editor-footer .qt-btn {
+    font-size: 12px;
+    min-height: 38px;
+  }
+  .qt-metric-workspace > :is(aside, section) {
+    padding: 12px;
+  }
+  .qt-metric-layout-controls {
+    max-height: 35dvh;
+    overflow: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .qt-metrics-editor * {
+    scroll-behavior: auto;
+    transition: none;
+  }
+}
+.qt-metrics-editor [hidden] {
+  display: none !important;
+}
+.qt-metric-workbench-tools {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 8px 18px;
+  border-bottom: 1px solid var(--qt-border, #d0d7de);
+  flex-shrink: 0;
+  background: var(--qt-bg, #fff);
+}
+.qt-metric-selection-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.qt-metric-selection-tools select {
+  width: 230px;
+  min-height: 30px;
+  padding-block: 4px;
+  font-weight: 500;
+}
+.qt-metric-panel-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-inline-start: auto;
+}
+.qt-metric-panel-tools > span:first-child {
+  margin-inline-end: 4px;
+  font-size: 11px;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metrics-editor .qt-metric-icon-button {
+  display: inline-flex;
+  align-items: center;
+  width: 30px;
+  min-height: 30px;
+  padding: 0;
+  flex-shrink: 0;
+}
+.qt-metric-panel-tools .qt-btn[aria-pressed=true] {
+  color: var(--qt-accent, #0969da);
+  border-color: color-mix(in srgb, var(--qt-accent, #0969da) 25%, var(--qt-bg, #fff));
+  background: var(--qt-accent-bg, #ddf4ff);
+}
+.qt-metric-panel-tools .qt-btn[aria-pressed=false] {
+  color: var(--qt-muted, #656d76);
+  background: var(--qt-header-bg, #f6f8fa);
+}
+.qt-metric-pane-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.qt-metric-workspace .qt-metric-pane-heading h3 {
+  margin: 0;
+}
+.qt-metric-reference .qt-metric-pane-heading {
+  margin-bottom: 0;
+}
+.qt-metrics-editor .qt-metric-pane-collapse {
+  border: 0;
+  background: transparent;
+  color: var(--qt-muted, #656d76);
+  width: 24px;
+  min-height: 24px;
+  opacity: 0.5;
+}
+.qt-metric-pane-collapse:is(:hover, :focus-visible) {
+  opacity: 1;
+}
+.qt-metric-preview-heading .qt-metric-preview-status {
+  margin-inline-start: auto;
+}
+.qt-metric-needs-attention {
+  display: inline-flex;
+  vertical-align: middle;
+  margin-inline-start: 5px;
+  color: var(--qt-fail-fg, #cf222e);
+}
+.qt-metric-review-issues {
+  color: var(--qt-fail-fg, #cf222e);
+}
+.qt-metric-authoring-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+  padding: 32px 16px;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-authoring-empty p {
+  margin: 0;
+}
+.qt-metric-authoring-empty strong {
+  color: var(--qt-text, #1f2328);
+}
+.qt-metric-canvas-frame {
+  position: relative;
+  min-height: 100%;
+  padding-inline-end: 18px;
+}
+.qt-metric-canvas-resize {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+  bottom: 0;
+  width: 18px;
+  cursor: col-resize;
+  touch-action: none;
+  background: var(--qt-header-bg, #f6f8fa);
+  border-inline-start: 1px solid var(--qt-border, #d0d7de);
+  border-inline-end: 1px solid var(--qt-border, #d0d7de);
+  border-radius: 0 5px 5px 0;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-canvas-resize > .qt-icon {
+  position: sticky;
+  top: 120px;
+  margin-top: 110px;
+  margin-inline-start: 1px;
+}
+.qt-metric-canvas-resize:is(:hover, :focus-visible) {
+  background: var(--qt-accent-bg, #ddf4ff);
+  color: var(--qt-accent, #0969da);
+}
+.qt-metric-canvas-note {
+  flex-shrink: 0;
+  padding: 8px 20px;
+  border-top: 1px solid var(--qt-border, #d0d7de);
+}
+.qt-metric-layout-card .qt-metric-head {
+  padding-inline-end: 56px;
+}
+.qt-metrics-editor .qt-metric-card-edit {
+  position: absolute;
+  top: 10px;
+  inset-inline-end: 28px;
+  z-index: 4;
+  min-height: 28px;
+  width: 28px;
+  background: var(--qt-bg, #fff);
+  border: 0;
+  opacity: 0;
+}
+.qt-metric-card-resize {
+  position: absolute;
+  inset-inline-end: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: var(--qt-bg, #fff);
+  border: 0;
+  border-radius: 4px 0 8px 0;
+  color: var(--qt-muted, #656d76);
+  cursor: nwse-resize;
+  touch-action: none;
+  z-index: 4;
+  opacity: 0;
+}
+.qt-metric-layout-selected .qt-metric-card-resize,
+.qt-reorder-item:is(:hover, :focus-within) :is(.qt-metric-card-edit, .qt-metric-card-resize) {
+  opacity: 1;
+}
+.qt-metric-card-resize:is(:hover, :focus-visible) {
+  color: var(--qt-accent, #0969da);
+  background: var(--qt-accent-bg, #ddf4ff);
+}
+@media (pointer: coarse) {
+  .qt-metric-card-resize {
+    width: 30px;
+    height: 30px;
+  }
+  .qt-metric-card-edit,
+  .qt-metric-card-resize {
+    opacity: 1 !important;
+  }
+}
+@media (max-width: 760px) {
+  .qt-metric-workbench-tools {
+    padding: 8px 12px;
+    gap: 8px;
+  }
+  .qt-metric-selection-tools {
+    flex: 1;
+  }
+  .qt-metric-selection-tools select {
+    width: auto;
+    flex: 1;
+  }
+  .qt-metric-panel-tools {
+    margin-inline-start: 0;
+  }
+  .qt-metric-context-link {
+    margin-inline-start: auto;
+  }
+  .qt-metrics-editor-footer {
+    flex-wrap: wrap;
+  }
+  .qt-metrics-editor-footer > span {
+    min-width: 100%;
+  }
+  .qt-metric-canvas-note {
+    padding-inline: 12px;
+  }
+}
+@keyframes qt-metric-view-enter {
+  from {
+    opacity: 0.65;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.qt-metric-workspace,
+.qt-metric-layout-editor {
+  animation: qt-metric-view-enter 140ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .qt-metric-workspace,
+  .qt-metric-layout-editor {
+    animation: none;
+  }
+}
+.qt-metric-axis-settings {
+  border: 1px solid var(--qt-border-subtle, #eaeef2);
+  border-radius: 0.375rem;
+  margin: 0 0 0.75rem;
+  padding: 0.5rem;
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.qt-metric-axis-settings legend {
+  font-size: 0.75rem;
+  color: var(--qt-muted, #656d76);
+}
+.qt-metric-axis-settings label {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.qt-metric-axis-settings input,
+.qt-metric-axis-settings select {
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* src/theme.css */
 /*# sourceMappingURL=theme.css.map */