@unson/brainbase-mcp 0.6.0 → 0.8.0

package/ui/value-proof-review.css

@@ -0,0 +1,504 @@
+/*
+ * 判断の見返し, on the organization edition's screen pattern (workspace-kit.css):
+ * page head, notices, filters, metrics and the 委任の地図 ledger in the
+ * workspace, the selected row or judgment in the right rail (or after the
+ * workspace when the host has no rail).  Layout rules read the shared tokens
+ * (brainbase-tokens.css) directly.  The part variables below keep the feedback
+ * form's previous palette for hosts that do not load the tokens.
+ */
+.vpr,
+.bb-vpr-detail {
+  --vpr-ink: var(--bb-color-ink, #172033);
+  --vpr-muted: var(--bb-color-muted, #667085);
+  --vpr-border: var(--bb-color-border, #d8dee9);
+  --vpr-border-strong: var(--bb-color-border-strong, #d8dee9);
+  --vpr-control-border: var(--bb-color-control-border, #d8dee9);
+  --vpr-panel: var(--bb-color-panel, #ffffff);
+  --vpr-surface: var(--bb-color-surface, #f5f7fb);
+  --vpr-accent: var(--bb-color-accent, #3157d5);
+  --vpr-accent-soft: var(--bb-color-accent-soft, #eef2fd);
+  --vpr-accent-strong: var(--bb-color-accent-strong, #3157d5);
+  --vpr-action: var(--bb-color-action, #3157d5);
+  --vpr-focus: var(--bb-color-focus, #3157d5);
+  --vpr-success-soft: var(--bb-color-success-soft, #ecfdf3);
+  --vpr-warning: var(--bb-color-warning, #9a6700);
+  --vpr-warning-soft: var(--bb-color-warning-soft, #fff8e6);
+  --vpr-danger: var(--bb-color-danger, #b42318);
+  --vpr-danger-soft: var(--bb-color-danger-soft, #fef3f2);
+  box-sizing: border-box;
+  display: block;
+  min-width: 0;
+  color: var(--vpr-ink);
+  font-family: var(--bb-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.vpr *,
+.vpr *::before,
+.vpr *::after {
+  box-sizing: border-box;
+}
+
+/* The standalone review host (value-proof:serve) has no shell around the part. */
+body:has(#brainbase-value-proof-review) {
+  margin: 0;
+  background: var(--bb-color-paper, #ffffff);
+}
+
+#brainbase-value-proof-review {
+  display: block;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 40px 48px 72px;
+}
+
+/*
+ * The local shell resets `.bb-shell button { font: inherit }`, which outranks the
+ * kit's button and row type; keep the kit's sizes and weight on this screen.
+ */
+.vpr .bb-ws-button,
+.bb-vpr-detail .bb-ws-button {
+  font-size: 13px;
+  font-weight: 680;
+}
+
+.vpr .bb-ws-button.is-quiet,
+.bb-vpr-detail .bb-ws-button.is-quiet {
+  font-size: 12px;
+}
+
+.vpr button.bb-ws-ledger-row {
+  font-size: 12px;
+}
+
+/* Notices: one body element beside the kit's label. */
+.bb-vpr-notice-body {
+  display: grid;
+  gap: var(--bb-space-2);
+  min-width: 0;
+}
+
+.bb-vpr-notice-body p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.bb-vpr-notice-body .bb-ws-button {
+  justify-self: start;
+}
+
+.bb-vpr-notice-title {
+  color: var(--bb-color-ink);
+  font-weight: 700;
+}
+
+.bb-vpr-rejected summary {
+  cursor: pointer;
+}
+
+.bb-vpr-rejected ul {
+  margin: var(--bb-space-1) 0 0;
+  padding-left: var(--bb-space-5);
+}
+
+/* Filters: toggles in the head actions row, the pressed one marked like a selected row. */
+.bb-vpr-filters {
+  margin-bottom: var(--bb-space-5);
+}
+
+.bb-ws-button.bb-vpr-toggle.is-pressed {
+  border-color: var(--bb-color-accent);
+  background: var(--bb-color-accent-soft);
+  color: var(--bb-color-accent-strong);
+  box-shadow: inset 3px 0 var(--bb-color-accent);
+}
+
+/* Text inside the ledgers. */
+.bb-vpr-primary {
+  color: var(--bb-color-ink);
+  font-size: 13px;
+  font-weight: 690;
+}
+
+.bb-vpr-state {
+  font-weight: 690;
+}
+
+.bb-vpr-state.is-delegated {
+  color: var(--bb-color-accent-strong);
+}
+
+.bb-vpr-state.is-verifying {
+  color: var(--bb-color-muted);
+}
+
+.bb-vpr-state.is-returned {
+  color: var(--bb-color-warning);
+}
+
+.bb-vpr-alert {
+  color: var(--bb-color-danger);
+  font-weight: 690;
+}
+
+/* 委任の地図: six columns; the kind name keeps the most room. */
+.bb-vpr-map-ledger .bb-ws-ledger-row {
+  grid-template-columns: minmax(130px, 1.3fr) 92px minmax(120px, 1.1fr) minmax(84px, .9fr) 96px 60px;
+}
+
+.bb-vpr-map-ledger.is-unrecorded .bb-ws-ledger-row:not(.bb-ws-ledger-head) {
+  background: var(--bb-color-surface);
+}
+
+.bb-vpr-map-ledger.is-unrecorded .bb-ws-ledger-row.is-selected {
+  background: var(--bb-color-accent-soft);
+}
+
+/* Highlights: compact ledgers of judgments, above the map. */
+.bb-vpr-judgment-ledger .bb-ws-ledger-row {
+  grid-template-columns: minmax(150px, 1.7fr) minmax(100px, 1fr) minmax(110px, 1.2fr) 52px;
+}
+
+.bb-vpr-highlight {
+  display: grid;
+  gap: var(--bb-space-2);
+  min-width: 0;
+  margin-bottom: var(--bb-space-6);
+}
+
+.bb-vpr-highlight h2 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-2);
+  align-items: baseline;
+  margin: 0;
+  font-size: 16px;
+  letter-spacing: -.02em;
+}
+
+.bb-vpr-highlight.is-corrected h2 {
+  color: var(--bb-color-danger);
+}
+
+.bb-vpr-highlight.is-after-ask h2 {
+  color: var(--bb-color-warning);
+}
+
+.bb-vpr-highlight.is-corrected .bb-ws-ledger {
+  border-top-color: var(--bb-color-danger);
+}
+
+.bb-vpr-highlight.is-after-ask .bb-ws-ledger {
+  border-top-color: var(--bb-color-warning);
+}
+
+.bb-vpr-count {
+  color: var(--bb-color-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.bb-vpr-hint {
+  margin: 0 0 var(--bb-space-2);
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-vpr-map > .bb-ws-section-title {
+  margin-top: 0;
+}
+
+.bb-vpr-map > .bb-ws-notice {
+  margin-block: 0 var(--bb-space-5);
+}
+
+.bb-vpr-subheading {
+  margin: var(--bb-space-6) 0 var(--bb-space-1);
+  color: var(--bb-color-ink);
+  font-size: 15px;
+}
+
+.bb-vpr-empty {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+/* Detail: in the rail, or after the workspace when the host has none. */
+.bb-vpr-inline-detail {
+  max-width: 760px;
+  margin-top: 48px;
+  border-top: 1px solid var(--bb-color-border-strong);
+  padding-top: var(--bb-space-5);
+}
+
+.bb-vpr-detail > .bb-vpr-back {
+  margin-bottom: var(--bb-space-4);
+}
+
+.bb-vpr-detail .bb-ws-rail-head h2:focus {
+  outline: none;
+}
+
+.bb-vpr-detail h4 {
+  margin: var(--bb-space-3) 0 var(--bb-space-1);
+  color: var(--bb-color-ink);
+  font-size: 13px;
+}
+
+.bb-vpr-list,
+.bb-vpr-options-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bb-vpr-options-list {
+  gap: var(--bb-space-1);
+  padding-left: var(--bb-space-5);
+  list-style: disc;
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-vpr-item {
+  width: 100%;
+  display: grid;
+  gap: 2px;
+  border: 0;
+  border-bottom: 1px solid var(--bb-color-border);
+  padding: var(--bb-space-3) var(--bb-space-2);
+  background: transparent;
+  color: var(--bb-color-muted);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bb-vpr-list > li:first-child .bb-vpr-item {
+  border-top: 1px solid var(--bb-color-border-strong);
+}
+
+.bb-vpr-item:hover {
+  background: var(--bb-color-panel);
+}
+
+.bb-vpr-item.is-selected {
+  background: var(--bb-color-accent-soft);
+  box-shadow: inset 3px 0 var(--bb-color-accent);
+}
+
+.bb-vpr-item-title {
+  color: var(--bb-color-ink);
+  font-size: 13px;
+  font-weight: 690;
+  overflow-wrap: anywhere;
+}
+
+.bb-vpr-item-summary {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.bb-vpr-item-meta {
+  color: var(--bb-color-quiet);
+  font-size: 11px;
+}
+
+.bb-vpr-outcome.is-outcome_verified {
+  color: var(--bb-color-success);
+}
+
+.bb-vpr-human-decision h3 {
+  color: var(--bb-color-warning);
+}
+
+.bb-vpr-history,
+.bb-vpr-audit {
+  font-size: 13px;
+}
+
+.bb-vpr-history {
+  margin-top: var(--bb-space-3);
+}
+
+.bb-vpr-history summary,
+.bb-vpr-audit summary {
+  color: var(--bb-color-muted);
+  cursor: pointer;
+}
+
+.bb-vpr-history ol {
+  margin: var(--bb-space-2) 0 0;
+  padding-left: var(--bb-space-5);
+  color: var(--bb-color-muted);
+}
+
+.bb-vpr-audit .bb-ws-definition {
+  margin-top: var(--bb-space-3);
+}
+
+.bb-vpr-audit dt,
+.bb-vpr-audit dd {
+  font-family: var(--bb-font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.bb-vpr-detail .bb-ws-rail-block > .bb-ws-button {
+  justify-self: start;
+}
+
+.bb-vpr-detail .bb-ws-rail-block > .vpr-notice {
+  margin-top: var(--bb-space-3);
+}
+
+/* Feedback form (kept from the previous part; the part variables fall back to the old palette). */
+.vpr-feedback {
+  display: grid;
+  gap: var(--bb-space-3);
+}
+
+.vpr-feedback fieldset {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.vpr-feedback legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.vpr-feedback .vpr-submit {
+  justify-self: start;
+}
+
+.vpr-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.vpr-option {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  min-height: 38px;
+  padding: 7px 11px;
+  border: 1px solid var(--vpr-control-border);
+  border-radius: var(--bb-radius-sm, 7px);
+  background: var(--vpr-panel);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.vpr-option input {
+  margin: 0;
+  accent-color: var(--vpr-action);
+}
+
+.vpr-option:has(input:checked) {
+  border-color: var(--vpr-accent);
+  color: var(--vpr-accent-strong);
+  background: var(--vpr-accent-soft);
+}
+
+.vpr-layers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.vpr-layers[hidden] {
+  display: none;
+}
+
+.vpr-layers .bb-vpr-hint {
+  flex-basis: 100%;
+  margin-bottom: 0;
+}
+
+.vpr-feedback textarea {
+  width: 100%;
+  padding: 9px 10px;
+  border: 1px solid var(--vpr-border-strong);
+  border-radius: var(--bb-radius-sm, 7px);
+  color: var(--vpr-ink);
+  background: var(--vpr-panel);
+  font: inherit;
+  resize: vertical;
+}
+
+.vpr button:focus-visible,
+.vpr input:focus-visible,
+.vpr textarea:focus-visible,
+.vpr summary:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--vpr-focus) 45%, var(--vpr-panel));
+  outline-offset: 2px;
+}
+
+/* Messages under the form and the consult button. */
+.vpr-notice {
+  margin: 0;
+  padding: 11px 12px;
+  border-radius: var(--bb-radius-sm, 7px);
+  white-space: pre-line;
+  font-size: 13px;
+}
+
+.vpr-notice.is-danger {
+  color: var(--vpr-danger);
+  background: var(--vpr-danger-soft);
+}
+
+.vpr-notice.is-success {
+  color: var(--vpr-accent-strong);
+  background: var(--vpr-success-soft);
+}
+
+.vpr-notice.is-muted {
+  color: var(--vpr-muted);
+  background: var(--vpr-surface);
+}
+
+@media (max-width: 760px) {
+  #brainbase-value-proof-review {
+    padding: 24px 18px 52px;
+  }
+
+  .bb-vpr-map-ledger .bb-ws-ledger-row {
+    grid-template-columns: minmax(0, 1fr) 88px 60px;
+  }
+
+  .bb-vpr-map-ledger .bb-ws-ledger-row > span:nth-child(3),
+  .bb-vpr-map-ledger .bb-ws-ledger-row > span:nth-child(4),
+  .bb-vpr-map-ledger .bb-ws-ledger-row > span:nth-child(6) {
+    display: none;
+  }
+
+  .bb-vpr-judgment-ledger .bb-ws-ledger-row {
+    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+  }
+
+  .bb-vpr-judgment-ledger .bb-ws-ledger-row > span:nth-child(2),
+  .bb-vpr-judgment-ledger .bb-ws-ledger-row > span:nth-child(4) {
+    display: none;
+  }
+
+  .bb-vpr-filters {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}