feat(ux): style guided quality center workspace

public/quality-center-ux.css

@@ -0,0 +1,438 @@
+#quality-center.ux-quality-center-ready {
+  --ux-quality-danger: var(--vd-danger, #b42318);
+  --ux-quality-warning: var(--vd-warning, #b54708);
+  --ux-quality-success: var(--vd-success, #067647);
+  --ux-quality-info: var(--vd-accent, #d94f2b);
+}
+
+#quality-center .ux-quality-priority-board {
+  display: grid;
+  gap: 18px;
+  margin: 0 0 20px;
+  padding: clamp(18px, 2vw, 26px);
+  border: 1px solid var(--vd-border, rgba(31, 35, 40, .12));
+  border-radius: var(--vd-radius-xl, 22px);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--vd-surface, #fff) 94%, var(--vd-accent, #d94f2b) 6%), var(--vd-surface, #fff));
+  box-shadow: var(--vd-shadow-sm, 0 8px 24px rgba(18, 24, 40, .06));
+}
+
+#quality-center .ux-quality-priority-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+#quality-center .ux-quality-priority-head h3 {
+  margin: 4px 0 6px;
+  font-size: clamp(1.2rem, 2vw, 1.55rem);
+}
+
+#quality-center .ux-quality-priority-head p {
+  max-width: 760px;
+  margin: 0;
+  color: var(--vd-text-muted, #667085);
+  line-height: 1.55;
+}
+
+#quality-center .ux-quality-kicker {
+  color: var(--vd-accent, #d94f2b);
+  font-size: .76rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+#quality-center .ux-quality-next {
+  flex: 0 0 auto;
+}
+
+#quality-center .ux-quality-priorities {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+#quality-center .ux-quality-priority {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--vd-border, rgba(31, 35, 40, .12));
+  border-radius: var(--vd-radius-lg, 16px);
+  background: var(--vd-surface, #fff);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
+}
+
+#quality-center .ux-quality-priority:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--vd-accent, #d94f2b) 45%, var(--vd-border, #ddd));
+}
+
+#quality-center .ux-quality-priority.is-active {
+  border-color: var(--vd-accent, #d94f2b);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-accent, #d94f2b) 14%, transparent);
+}
+
+#quality-center .ux-quality-priority-count {
+  display: grid;
+  place-items: center;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 14px;
+  background: var(--vd-surface-subtle, #f6f7f8);
+  font-size: 1.25rem;
+}
+
+#quality-center [data-ux-quality-status="blocked"] .ux-quality-priority-count {
+  color: var(--ux-quality-danger);
+  background: color-mix(in srgb, var(--ux-quality-danger) 10%, transparent);
+}
+
+#quality-center [data-ux-quality-status="review"] .ux-quality-priority-count {
+  color: var(--ux-quality-warning);
+  background: color-mix(in srgb, var(--ux-quality-warning) 11%, transparent);
+}
+
+#quality-center [data-ux-quality-status="ready"] .ux-quality-priority-count {
+  color: var(--ux-quality-success);
+  background: color-mix(in srgb, var(--ux-quality-success) 10%, transparent);
+}
+
+#quality-center .ux-quality-priority-copy {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+#quality-center .ux-quality-priority-copy b {
+  font-size: .95rem;
+}
+
+#quality-center .ux-quality-priority-copy small {
+  color: var(--vd-text-muted, #667085);
+  line-height: 1.35;
+}
+
+#quality-center .ux-quality-summary-secondary {
+  margin-bottom: 14px;
+  opacity: .88;
+}
+
+#quality-center .ux-quality-toolbar-shell {
+  display: grid;
+  gap: 12px;
+}
+
+#quality-center .ux-quality-toolbar-primary,
+#quality-center .ux-quality-toolbar-primary .quality-search {
+  width: 100%;
+}
+
+#quality-center .ux-quality-filter-panel {
+  border-top: 1px solid var(--vd-border, rgba(31, 35, 40, .1));
+  padding-top: 10px;
+}
+
+#quality-center .ux-quality-filter-panel > summary,
+#quality-center .ux-quality-secondary > summary,
+#quality-center .ux-quality-more-actions > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  cursor: pointer;
+  font-weight: 750;
+  list-style: none;
+}
+
+#quality-center .ux-quality-filter-panel > summary::-webkit-details-marker,
+#quality-center .ux-quality-secondary > summary::-webkit-details-marker,
+#quality-center .ux-quality-more-actions > summary::-webkit-details-marker {
+  display: none;
+}
+
+#quality-center .ux-quality-filter-panel > summary::after,
+#quality-center .ux-quality-secondary > summary::after,
+#quality-center .ux-quality-more-actions > summary::after {
+  content: "+";
+  font-size: 1.1rem;
+  color: var(--vd-text-muted, #667085);
+}
+
+#quality-center .ux-quality-filter-panel[open] > summary::after,
+#quality-center .ux-quality-secondary[open] > summary::after,
+#quality-center .ux-quality-more-actions[open] > summary::after {
+  content: "−";
+}
+
+#quality-center .ux-quality-filter-body {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  padding-top: 12px;
+}
+
+#quality-center .ux-quality-filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+#quality-center .ux-quality-filter-chips.is-empty {
+  display: none;
+}
+
+#quality-center .ux-quality-filter-chip {
+  padding: 7px 10px;
+  border: 1px solid color-mix(in srgb, var(--vd-accent, #d94f2b) 28%, var(--vd-border, #ddd));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vd-accent, #d94f2b) 7%, var(--vd-surface, #fff));
+  color: inherit;
+  font-size: .78rem;
+  cursor: pointer;
+}
+
+#quality-center .quality-workspace {
+  align-items: start;
+  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.5fr);
+}
+
+#quality-center .quality-list-panel {
+  position: sticky;
+  top: 84px;
+  max-height: calc(100vh - 110px);
+  overflow: auto;
+}
+
+#quality-center .quality-list-item {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+#quality-center .quality-list-state {
+  grid-column: 2 / 4;
+  justify-self: start;
+}
+
+#quality-center .quality-detail-panel {
+  min-width: 0;
+}
+
+#quality-center .quality-detail-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+#quality-center .ux-quality-main-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+#quality-center .ux-quality-more-actions {
+  position: relative;
+}
+
+#quality-center .ux-quality-more-actions > summary {
+  min-height: 38px;
+  padding: 0 11px;
+  border: 1px solid var(--vd-border, rgba(31, 35, 40, .13));
+  border-radius: var(--vd-radius-md, 12px);
+  background: var(--vd-surface, #fff);
+  font-size: .84rem;
+}
+
+#quality-center .ux-quality-more-actions-body {
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 190px;
+  padding: 8px;
+  border: 1px solid var(--vd-border, rgba(31, 35, 40, .13));
+  border-radius: var(--vd-radius-md, 12px);
+  background: var(--vd-surface, #fff);
+  box-shadow: var(--vd-shadow-lg, 0 18px 45px rgba(18, 24, 40, .16));
+}
+
+#quality-center .ux-quality-more-actions-body button {
+  width: 100%;
+}
+
+#quality-center .ux-quality-issue-section {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--vd-border, rgba(31, 35, 40, .1));
+}
+
+#quality-center .ux-quality-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-weight: 800;
+}
+
+#quality-center .ux-quality-issue-summary {
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: var(--vd-surface-subtle, #f6f7f8);
+  color: var(--vd-text-muted, #667085);
+  font-size: .76rem;
+}
+
+#quality-center .ux-quality-issue-summary[data-tone="danger"] {
+  color: var(--ux-quality-danger);
+  background: color-mix(in srgb, var(--ux-quality-danger) 10%, transparent);
+}
+
+#quality-center .ux-quality-issue-summary[data-tone="warning"] {
+  color: var(--ux-quality-warning);
+  background: color-mix(in srgb, var(--ux-quality-warning) 10%, transparent);
+}
+
+#quality-center .ux-quality-issue-summary[data-tone="success"] {
+  color: var(--ux-quality-success);
+  background: color-mix(in srgb, var(--ux-quality-success) 10%, transparent);
+}
+
+#quality-center .quality-issue-tabs {
+  display: flex;
+  gap: 7px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+#quality-center .quality-issue-tabs button {
+  flex: 0 0 auto;
+}
+
+#quality-center .quality-issue-tabs button.ux-quality-has-priority {
+  border-color: color-mix(in srgb, var(--ux-quality-danger) 45%, var(--vd-border, #ddd));
+}
+
+#quality-center .quality-issues {
+  display: grid;
+  gap: 8px;
+}
+
+#quality-center .quality-issue {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 13px;
+}
+
+#quality-center .ux-quality-secondary {
+  margin-top: 18px;
+  padding: 14px 0 0;
+  border-top: 1px solid var(--vd-border, rgba(31, 35, 40, .1));
+}
+
+#quality-center .ux-quality-secondary > summary span:first-child {
+  display: grid;
+  gap: 2px;
+}
+
+#quality-center .ux-quality-secondary > summary small {
+  color: var(--vd-text-muted, #667085);
+  font-weight: 500;
+}
+
+#quality-center .ux-quality-secondary-badge {
+  margin-left: auto;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--vd-surface-subtle, #f6f7f8);
+  color: var(--vd-text-muted, #667085);
+  font-size: .72rem;
+}
+
+#quality-center .ux-quality-secondary-body {
+  display: grid;
+  gap: 18px;
+  padding-top: 16px;
+}
+
+#quality-center .ux-quality-secondary-body > section,
+#quality-center .ux-quality-secondary-body > div {
+  margin: 0;
+}
+
+#quality-center :is(button, input, select, summary):focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--vd-accent, #d94f2b) 38%, transparent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 1080px) {
+  #quality-center .ux-quality-priorities {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  #quality-center .quality-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  #quality-center .quality-list-panel {
+    position: static;
+    max-height: none;
+  }
+}
+
+@media (max-width: 760px) {
+  #quality-center .ux-quality-priority-head,
+  #quality-center .quality-detail-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  #quality-center .ux-quality-next,
+  #quality-center .ux-quality-main-actions,
+  #quality-center .ux-quality-main-actions > *,
+  #quality-center .ux-quality-more-actions,
+  #quality-center .ux-quality-more-actions > summary {
+    width: 100%;
+  }
+
+  #quality-center .ux-quality-filter-body {
+    grid-template-columns: 1fr;
+  }
+
+  #quality-center .ux-quality-more-actions-body {
+    position: static;
+    margin-top: 8px;
+  }
+}
+
+@media (max-width: 470px) {
+  #quality-center .ux-quality-priorities {
+    grid-template-columns: 1fr;
+  }
+
+  #quality-center .quality-summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  #quality-center .quality-detail-head {
+    align-items: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #quality-center *,
+  #quality-center *::before,
+  #quality-center *::after {
+    scroll-behavior: auto !important;
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}