devmethod-ai 0.2.0 → 0.3.0

package/dist/review-ui.css

@@ -0,0 +1,782 @@
+:root {
+  color-scheme:light;
+  --ink:#151643;
+  --muted:#5d6587;
+  --indigo:#4940ed;
+  --line:#e1e6f2;
+  --paper:#fff;
+  --canvas:#fafbfe;
+  --red:#c42e35;
+  --amber:#986000;
+  --green:#06764f}
+* {
+  box-sizing:border-box}
+body {
+  margin:0;
+  background:var(--canvas);
+  color:var(--ink);
+  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+button,input,select,summary {
+  font:inherit}
+button,a,summary,label.import {
+  touch-action:manipulation}
+button,summary {
+  cursor:pointer}
+button {
+  color:inherit}
+a {
+  color:#3535cf;
+  text-underline-offset:3px}
+p {
+  margin:8px 0}
+h1,h2,h3,h4 {
+  line-height:1.25;
+  margin:0}
+h1 {
+  font-size:32px;
+  letter-spacing:-.8px}
+h2 {
+  font-size:23px}
+h3 {
+  font-size:16px}
+h4 {
+  font-size:15px}
+.layout {
+  display:grid;
+  grid-template-columns:208px minmax(0,1fr);
+  min-height:100vh}
+.sidebar {
+  position:sticky;
+  top:0;
+  height:100vh;
+  padding:25px 16px;
+  background:linear-gradient(150deg,#f3f6fd,#fafbff);
+  border-right:1px solid var(--line);
+  display:flex;
+  flex-direction:column;
+  gap:13px}
+.brand {
+  font-size:23px;
+  font-weight:750;
+  letter-spacing:-.5px;
+  white-space:nowrap}
+.eyebrow {
+  font-size:10px;
+  font-weight:700;
+  letter-spacing:1.8px;
+  color:#626c95;
+  margin:0 0 6px}
+.sidebar>.eyebrow {
+  margin:24px 8px 0}
+.project {
+  padding:0 8px;
+  overflow-wrap:anywhere}
+.side-nav {
+  margin:21px -6px 6px;
+  padding-top:20px;
+  border-top:1px solid var(--line)}
+.side-active {
+  border-radius:8px;
+  background:#e6e7ff;
+  color:#3023d8;
+  font-weight:650;
+  padding:12px}
+.side-note {
+  margin-top:auto;
+  padding:16px 7px 0;
+  font-size:11px;
+  color:#66708d}
+.side-note strong {
+  font-weight:600}
+.main {
+  padding:27px 30px 42px;
+  min-width:0;
+  max-width:1720px;
+  width:100%;
+  margin:0 auto}
+.page-header {
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  gap:20px;
+  margin-bottom:23px}
+.subtitle {
+  font-size:15px;
+  color:#535d86}
+.revision {
+  font-size:12px;
+  color:var(--muted);
+  overflow-wrap:anywhere}
+.button {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:6px;
+  border:1px solid #9ca2bd;
+  border-radius:6px;
+  background:white;
+  padding:10px 15px;
+  text-decoration:none;
+  font-size:13px;
+  font-weight:650;
+  color:var(--ink);
+  white-space:nowrap;
+  box-shadow:0 1px 2px #15164308}
+.button.primary {
+  background:var(--indigo);
+  border-color:var(--indigo);
+  color:white}
+.button:hover {
+  filter:brightness(.97)}
+.import {
+  position:relative;
+  overflow:hidden;
+  background:#fff;
+  border-color:var(--line);
+  font-size:12px}
+.import input {
+  position:absolute;
+  inset:0;
+  opacity:0;
+  width:100%;
+  cursor:pointer}
+.import:focus-within {
+  outline:3px solid #3023d8;
+  outline-offset:3px}
+.export {
+  position:relative;
+  flex-shrink:0}
+.export summary {
+  list-style:none}
+.export summary::-webkit-details-marker {
+  display:none}
+.export-menu {
+  position:absolute;
+  right:0;
+  top:49px;
+  width:278px;
+  z-index:3;
+  background:white;
+  border:1px solid var(--line);
+  border-radius:8px;
+  padding:7px;
+  box-shadow:0 9px 30px #17194322}
+.export-menu button {
+  display:block;
+  text-align:left;
+  width:100%;
+  border:0;
+  background:white;
+  padding:12px;
+  border-radius:5px}
+.export-menu button:hover {
+  background:#f2f1ff}
+.banner {
+  display:flex;
+  gap:17px;
+  padding:16px 20px;
+  border:1px solid #edc06c;
+  border-radius:7px;
+  background:#fff6e0;
+  color:#8b5200;
+  margin-bottom:17px}
+.banner h2 {
+  font-size:21px}
+.banner p {
+  margin:3px 0}
+.banner .policy {
+  font-size:11px;
+  color:#745f3d}
+.banner-icon {
+  font-size:31px;
+  line-height:1.4}
+.banner.ready {
+  background:#edfaf4;
+  border-color:#a5d9c0;
+  color:#076543}
+.banner.incomplete,.banner.blocked {
+  background:#f0f3ff;
+  color:#324b87;
+  border-color:#bbcbed}
+.stats {
+  display:grid;
+  grid-template-columns:repeat(5,minmax(82px,1fr)) minmax(220px,2.2fr);
+  gap:11px}
+.stat {
+  background:white;
+  border:1px solid var(--line);
+  border-radius:7px;
+  padding:13px 12px;
+  display:grid;
+  grid-template-columns:28px 1fr;
+  align-items:center;
+  column-gap:8px;
+  min-width:0}
+.stat strong {
+  font-size:27px;
+  line-height:1}
+.stat>span:last-child {
+  grid-column:2;
+  font-size:12px;
+  color:#465078}
+.stat-icon {
+  grid-row:span 2;
+  border-radius:50%;
+  width:26px;
+  height:26px;
+  text-align:center;
+  background:#eef0ff;
+  color:#4e4bdf;
+  font-size:18px;
+  font-weight:700}
+.critical .stat-icon,.major .stat-icon {
+  background:#ffdfdf;
+  color:var(--red)}
+.moderate .stat-icon {
+  background:#fff0cd;
+  color:var(--amber)}
+.coverage-stat {
+  display:flex;
+  align-items:stretch;
+  flex-direction:column;
+  justify-content:center;
+  gap:7px}
+.coverage-stat strong {
+  font-size:12px;
+  line-height:1.3}
+.coverage-stat>span:last-child {
+  font-size:10px}
+.coverage-bars {
+  display:flex;
+  height:7px;
+  background:#e1e6f0;
+  border-radius:10px;
+  overflow:hidden;
+  width:100%}
+.coverage-bars span {
+  min-width:0}
+.coverage-bars .passed {
+  background:#22a675}
+.coverage-bars .failed {
+  background:#ec575c}
+.coverage-bars .not-run,.coverage-bars .blocked {
+  background:#aeb7cc}
+.coverage-bars .out-of-scope {
+  background:#e1e6f0}
+.count-caption {
+  font-size:10px;
+  color:var(--muted);
+  margin:7px 0 11px}
+.revision-hint {
+  font-size:11px;
+  color:var(--muted);
+  margin:0 0 12px}
+.notice {
+  padding:12px 15px;
+  border:1px solid #ccd5ed;
+  background:#f2f5ff;
+  color:#35466e;
+  border-radius:7px;
+  font-size:13px}
+.limits {
+  font-size:12px;
+  color:var(--muted)}
+.limits summary {
+  font-weight:650;
+  width:fit-content}
+.limits li {
+  margin:5px 0}
+.important-limit {
+  font-size:12px;
+  color:#665229;
+  margin:7px 0 17px}
+.workspace {
+  display:grid;
+  grid-template-columns:minmax(350px,.94fr) minmax(380px,1.12fr);
+  background:white;
+  border:1px solid var(--line);
+  border-radius:8px;
+  min-height:560px;
+  box-shadow:0 2px 8px #22224b03;
+  overflow:hidden}
+.list-panel {
+  border-right:1px solid var(--line);
+  min-width:0}
+.tabs {
+  display:flex;
+  border-bottom:1px solid var(--line);
+  padding:0 12px;
+  gap:6px}
+.tab {
+  position:relative;
+  flex:1;
+  padding:17px 8px;
+  border:0;
+  background:none;
+  color:#545d85;
+  font-size:14px;
+  font-weight:500;
+  white-space:nowrap}
+.tab.active {
+  color:#2f22c8;
+  font-weight:700}
+.tab.active:after {
+  content:"";
+  position:absolute;
+  bottom:0;
+  left:2px;
+  right:2px;
+  height:3px;
+  background:var(--indigo);
+  border-radius:4px 4px 0 0}
+.view-panel {
+  padding:16px}
+.filters {
+  display:grid;
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:9px}
+.filters label {
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  font-size:10px;
+  color:#5e688b;
+  font-weight:650}
+.search-label {
+  grid-column:1/-1}
+input,select {
+  min-width:0;
+  width:100%;
+  color:var(--ink);
+  background:#fafbfe;
+  border:1px solid #dce1ef;
+  border-radius:6px;
+  padding:8px 9px;
+  font-size:12px}
+input[type=file] {
+  padding:0}
+.result-count {
+  font-size:11px;
+  color:var(--muted);
+  margin:14px 0 9px}
+.finding {
+  display:block;
+  text-align:left;
+  width:100%;
+  border:1px solid var(--line);
+  background:white;
+  border-radius:7px;
+  padding:13px 14px;
+  margin:0 0 10px;
+  transition:background .15s}
+.finding:hover {
+  background:#fafaff}
+.finding.selected {
+  border-color:#9c92ff;
+  background:#f7f5ff;
+  box-shadow:inset 3px 0 var(--indigo)}
+.finding-top {
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:8px;
+  margin-bottom:9px}
+.finding-id {
+  font-size:12px}
+.finding h3 {
+  font-size:15px;
+  margin-bottom:10px}
+.finding-meta {
+  display:flex;
+  gap:9px;
+  align-items:center;
+  flex-wrap:wrap;
+  font-size:11px;
+  color:#4c557b}
+.resolution {
+  margin-left:auto}
+.badge {
+  display:inline-flex;
+  align-items:center;
+  gap:4px;
+  font-size:11px;
+  font-weight:650;
+  padding:4px 8px;
+  border-radius:6px;
+  line-height:1.25;
+  white-space:nowrap}
+.badge.critical,.badge.major,.badge.failed {
+  background:#ffe5e5;
+  color:#ad222b}
+.badge.moderate {
+  background:#fff0cf;
+  color:#895000}
+.badge.minor,.badge.suspected,.badge.unverified {
+  background:#edf1ff;
+  color:#3c50a1}
+.badge.confirmed,.badge.passed {
+  background:#e4f6ed;
+  color:#04714d}
+.badge.neutral,.badge.not-run,.badge.blocked,.badge.out-of-scope {
+  background:#edf0f6;
+  color:#515d78}
+.detail-panel {
+  padding:21px 23px;
+  min-width:0}
+.detail-title {
+  font-size:23px;
+  letter-spacing:-.35px}
+.detail-badges {
+  display:flex;
+  gap:9px;
+  flex-wrap:wrap;
+  margin:12px 0}
+.impact {
+  font-size:16px}
+.location {
+  font:11px/1.5 ui-monospace,SFMono-Regular,monospace;
+  color:#5e6688;
+  overflow-wrap:anywhere;
+  margin:8px 0 16px}
+.detail-panel>.tabs {
+  margin:0 -23px;
+  padding:0 20px}
+.detail-panel .tab {
+  flex:0 1 130px}
+.detail-content {
+  padding-top:18px}
+.text-block {
+  margin:0 0 17px}
+.text-block h3 {
+  font-size:12px;
+  color:#5f688a;
+  margin-bottom:6px}
+.text-block p {
+  font-size:14px;
+  white-space:pre-wrap;
+  overflow-wrap:anywhere}
+.compare {
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  padding:14px;
+  background:#f8f9fe;
+  border:1px solid var(--line);
+  border-radius:6px;
+  margin:14px 0}
+.compare .text-block {
+  margin:0}
+.reproduction {
+  font-size:13px;
+  padding-left:20px;
+  color:#4c5678}
+.reproduction li {
+  margin:6px 0}
+.evidence-card {
+  padding:15px;
+  border:1px solid var(--line);
+  border-radius:7px;
+  margin:16px 0}
+.evidence-card h3 {
+  font-size:14px;
+  margin-bottom:10px}
+.evidence-card .eyebrow {
+  font-size:9px;
+  letter-spacing:.5px}
+.evidence-card pre,pre {
+  white-space:pre-wrap;
+  overflow-wrap:anywhere;
+  word-break:break-word;
+  font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;
+  background:#f6f8fd;
+  padding:13px;
+  border-radius:6px}
+.diagram {
+  border-left:3px solid #8b85ed;
+  color:#424485}
+.evidence-image {
+  display:block;
+  max-width:100%;
+  height:auto;
+  border:1px solid var(--line);
+  border-radius:6px;
+  margin:10px 0}
+.correction-preview {
+  padding:13px 15px;
+  background:#f6f7fc;
+  border:1px solid var(--line);
+  border-radius:6px;
+  font-size:13px}
+.correction-preview strong {
+  font-size:12px}
+.detail-actions {
+  display:flex;
+  justify-content:flex-end;
+  gap:9px;
+  flex-wrap:wrap;
+  border-top:1px solid var(--line);
+  padding-top:17px;
+  margin-top:22px}
+.detail-actions input {
+  width:100%;
+  font-size:11px}
+.back-button {
+  display:none}
+.empty {
+  padding:60px 22px;
+  text-align:center;
+  color:var(--muted);
+  background:white;
+  border:1px solid var(--line);
+  border-radius:8px}
+.empty h2 {
+  color:var(--ink);
+  margin:12px 0}
+.empty .import {
+  margin-top:18px}
+.empty.small {
+  padding:28px 16px;
+  font-size:13px}
+.detail-empty {
+  border:0;
+  margin-top:110px}
+.empty-icon {
+  font-size:36px;
+  color:var(--indigo)}
+.muted {
+  font-size:12px;
+  color:var(--muted)}
+.panel-title {
+  font-size:18px;
+  margin-bottom:12px}
+.domain-title {
+  font-size:14px;
+  margin:23px 0 10px}
+.check-card,.source-card {
+  border:1px solid var(--line);
+  border-radius:7px;
+  padding:15px;
+  margin-bottom:12px}
+.check-card h4 {
+  margin:10px 0}
+.check-card p {
+  font-size:12px}
+.check-card summary {
+  font-size:12px;
+  color:#3d36be}
+.source-card h3 {
+  font-size:15px}
+.source-meta {
+  font-size:12px;
+  color:var(--muted)}
+.source-card .text-block {
+  margin-top:12px}
+.source-card .text-block p {
+  font-size:12px}
+.technology {
+  padding:10px;
+  background:#f5f6fc;
+  border-radius:5px;
+  font-size:12px}
+.link {
+  font-size:12px}
+.legacy {
+  font-size:14px;
+  background:white;
+  border:1px solid var(--line);
+  padding:24px}
+.loading {
+  padding:60px;
+  font-size:18px}
+:focus-visible {
+  outline:3px solid #3523cf;
+  outline-offset:3px}
+button:focus:not(:focus-visible) {
+  outline:none}
+@media(min-width:1700px) {
+  .main {
+  padding:32px 42px}
+.workspace {
+  grid-template-columns:1fr 1.2fr}
+.stat {
+  padding:16px}
+}
+@media(max-width:1200px) {
+  .layout {
+  grid-template-columns:176px minmax(0,1fr)}
+.brand {
+  font-size:19px}
+.main {
+  padding:22px 20px}
+.stats {
+  grid-template-columns:repeat(5,1fr)}
+.coverage-stat {
+  grid-column:1/-1;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:18px}
+.coverage-bars {
+  max-width:170px}
+.workspace {
+  grid-template-columns:minmax(290px,.9fr) minmax(310px,1fr)}
+.detail-panel {
+  padding:18px}
+.detail-panel>.tabs {
+  margin:0 -18px}
+.detail-title {
+  font-size:21px}
+}
+@media(max-width:850px) {
+  .layout {
+  display:block}
+.sidebar {
+  position:static;
+  height:auto;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  padding:13px 18px;
+  border-right:0;
+  border-bottom:1px solid var(--line);
+  gap:15px}
+.sidebar>.eyebrow,.project,.side-nav,.side-note {
+  display:none}
+.sidebar .import {
+  margin-left:auto}
+.brand {
+  font-size:20px}
+.main {
+  padding:20px 16px}
+.page-header {
+  gap:10px}
+.page-header h1 {
+  font-size:26px}
+.page-header .button {
+  font-size:11px;
+  padding:9px}
+.stats {
+  grid-template-columns:repeat(5,1fr);
+  gap:6px}
+.stat {
+  display:flex;
+  flex-direction:column;
+  gap:5px;
+  padding:10px 4px}
+.stat-icon {
+  display:none}
+.stat strong {
+  font-size:23px}
+.stat>span:last-child {
+  font-size:10px}
+.coverage-stat {
+  flex-direction:row;
+  gap:12px;
+  flex-wrap:wrap;
+  padding:12px}
+.coverage-stat strong {
+  font-size:12px}
+.coverage-bars {
+  max-width:120px}
+.workspace {
+  display:block;
+  min-height:450px}
+.list-panel {
+  border:0}
+.detail-panel {
+  display:none}
+.workspace.show-detail .list-panel {
+  display:none}
+.workspace.show-detail .detail-panel {
+  display:block}
+.back-button {
+  display:block;
+  border:0;
+  background:transparent;
+  color:#4537d0;
+  padding:0;
+  margin:0 0 18px;
+  font-size:13px;
+  font-weight:650}
+.banner {
+  padding:13px}
+.banner h2 {
+  font-size:18px}
+.banner p {
+  font-size:13px}
+.banner .policy {
+  font-size:10px}
+.count-caption {
+  font-size:9px}
+.export-menu {
+  width:252px}
+.detail-title {
+  font-size:22px}
+.detail-empty {
+  margin:0}
+.important-limit {
+  font-size:11px}
+.view-panel {
+  padding:14px}
+}
+@media(max-width:440px) {
+  .page-header {
+  flex-direction:column}
+.page-header .export {
+  align-self:flex-end;
+  margin-top:-2px}
+.compare {
+  grid-template-columns:1fr}
+.brand {
+  font-size:18px}
+.sidebar {
+  padding:12px}
+.sidebar .import {
+  font-size:10px;
+  padding:8px}
+.main {
+  padding:18px 12px}
+.coverage-stat {
+  gap:8px}
+.coverage-bars {
+  max-width:100%;
+  width:100%}
+.detail-actions {
+  justify-content:stretch}
+.detail-actions .button {
+  flex:1;
+  white-space:normal}
+.banner-icon {
+  font-size:25px}
+}
+@media(prefers-reduced-motion:reduce) {
+  * {
+  transition:none!important;
+  scroll-behavior:auto!important}
+}
+
+
+/* Keep inspection content near the first fold at the approved desktop size. */
+@media(min-width:851px) {
+  .page-header {
+  margin-bottom:16px}
+.subtitle {
+  display:inline;
+  margin-right:12px}
+.revision {
+  display:inline}
+.page-header h1 {
+  margin-bottom:8px}
+.banner {
+  padding:13px 18px;
+  margin-bottom:12px}
+.revision-hint {
+  margin-bottom:9px}
+.stat {
+  padding-top:11px;
+  padding-bottom:11px}
+.important-limit {
+  margin-bottom:12px}
+.main {
+  padding-top:21px}
+}