Spaces:
Running
Running
| :root { | |
| --canvas: #f5f4f1; | |
| --surface: #ffffff; | |
| --surface-raised: #faf9f6; | |
| --ink: #1a1916; | |
| --muted: #5c5a55; | |
| --faint: #9c9a95; | |
| --line: #e8e6e1; | |
| --line-strong: #c8c6c0; | |
| --accent: #5bacd1; | |
| --accent-hover: #4a9bb8; | |
| --accent-soft: #eaf6fb; | |
| --accent-ink: #2d718f; | |
| --comment: #5bacd1; | |
| --comment-soft: #eaf6fb; | |
| --comment-ink: #2d718f; | |
| --required: #b9434b; | |
| --required-soft: #fbedee; | |
| --code: #2c2e36; | |
| --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.07); | |
| font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: var(--ink); | |
| background: var(--canvas); | |
| font-synthesis: none; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| body { | |
| min-width: 320px; | |
| font-size: 14px; | |
| } | |
| button, | |
| input, | |
| textarea, | |
| select { | |
| font: inherit; | |
| letter-spacing: 0; | |
| } | |
| button, | |
| a { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| button { | |
| color: inherit; | |
| } | |
| button:focus-visible, | |
| a:focus-visible, | |
| input:focus-visible, | |
| textarea:focus-visible, | |
| select:focus-visible { | |
| outline: 2px solid rgba(91, 172, 209, 0.55); | |
| outline-offset: 2px; | |
| } | |
| code, | |
| kbd, | |
| .schema-name, | |
| .schema-path, | |
| .schema-value { | |
| font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| .app-shell { | |
| display: grid; | |
| grid-template-rows: 60px minmax(0, 1fr); | |
| width: 100%; | |
| height: 100%; | |
| background: var(--canvas); | |
| } | |
| .topbar { | |
| position: relative; | |
| z-index: 20; | |
| display: grid; | |
| grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); | |
| align-items: center; | |
| padding: 0 18px; | |
| border-bottom: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.96); | |
| } | |
| .brand { | |
| display: inline-flex; | |
| gap: 10px; | |
| align-items: center; | |
| justify-self: start; | |
| min-width: 0; | |
| max-width: 100%; | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .brand-mark { | |
| display: grid; | |
| width: 34px; | |
| height: 34px; | |
| place-items: center; | |
| border-radius: 6px; | |
| background: #92d4f3; | |
| color: #2c2e36; | |
| font-size: 12px; | |
| font-weight: 650; | |
| } | |
| .brand-copy { | |
| display: grid; | |
| min-width: 0; | |
| gap: 1px; | |
| } | |
| .benchmark-select { | |
| width: 100%; | |
| max-width: 245px; | |
| min-width: 0; | |
| padding: 0 2px 0 0; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--ink); | |
| font-size: 13px; | |
| font-weight: 650; | |
| text-overflow: ellipsis; | |
| cursor: pointer; | |
| } | |
| .brand-copy strong { | |
| font-size: 13px; | |
| font-weight: 650; | |
| } | |
| .brand-copy span { | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .view-tabs { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 38px; | |
| padding: 3px; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: var(--surface-raised); | |
| } | |
| .view-tab { | |
| display: inline-flex; | |
| height: 30px; | |
| gap: 7px; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 13px; | |
| border: 0; | |
| border-radius: 5px; | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .view-tab svg { | |
| width: 15px; | |
| height: 15px; | |
| } | |
| .view-tab.is-active { | |
| background: var(--surface); | |
| box-shadow: 0 1px 4px rgba(26, 25, 22, 0.12); | |
| color: var(--ink); | |
| } | |
| .topbar-actions { | |
| display: flex; | |
| gap: 9px; | |
| align-items: center; | |
| justify-self: end; | |
| } | |
| .save-state { | |
| display: inline-flex; | |
| gap: 6px; | |
| align-items: center; | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .save-state > span { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: #4b9b70; | |
| } | |
| .save-state.is-saving > span { | |
| background: var(--comment); | |
| } | |
| .save-state.is-error > span { | |
| background: var(--required); | |
| } | |
| .icon-button { | |
| display: inline-grid; | |
| width: 34px; | |
| height: 34px; | |
| flex: 0 0 34px; | |
| place-items: center; | |
| padding: 0; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: var(--surface); | |
| color: var(--muted); | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| .icon-button:hover { | |
| border-color: var(--line-strong); | |
| color: var(--ink); | |
| } | |
| .icon-button svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .view { | |
| display: none; | |
| min-height: 0; | |
| } | |
| .view.is-active { | |
| display: grid; | |
| } | |
| #review-view { | |
| grid-template-columns: 264px minmax(480px, 1fr) 0; | |
| transition: grid-template-columns 180ms ease; | |
| } | |
| #review-view.thread-open { | |
| grid-template-columns: 264px minmax(480px, 1fr) 410px; | |
| } | |
| .outline-panel { | |
| display: grid; | |
| grid-template-rows: auto auto minmax(0, 1fr) auto; | |
| min-width: 0; | |
| min-height: 0; | |
| border-right: 1px solid var(--line); | |
| background: var(--surface-raised); | |
| } | |
| .outline-head { | |
| padding: 16px 14px 12px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .schema-switcher { | |
| display: grid; | |
| gap: 5px; | |
| margin-bottom: 10px; | |
| } | |
| .schema-switcher > span { | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 650; | |
| } | |
| .schema-switcher select { | |
| width: 100%; | |
| height: 36px; | |
| padding: 0 9px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 6px; | |
| outline: 0; | |
| background: var(--surface); | |
| color: var(--ink); | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .schema-switcher select:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(91, 172, 209, 0.13); | |
| } | |
| .search-control { | |
| display: grid; | |
| grid-template-columns: 17px minmax(0, 1fr) auto; | |
| gap: 8px; | |
| align-items: center; | |
| height: 36px; | |
| padding: 0 9px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 6px; | |
| background: var(--surface); | |
| } | |
| .search-control:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(91, 172, 209, 0.13); | |
| } | |
| .search-control svg { | |
| width: 15px; | |
| height: 15px; | |
| color: var(--faint); | |
| } | |
| .search-control input { | |
| min-width: 0; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--ink); | |
| font-size: 12px; | |
| } | |
| .search-control input::placeholder { | |
| color: var(--faint); | |
| } | |
| kbd { | |
| padding: 2px 4px; | |
| border: 1px solid var(--line); | |
| border-bottom-color: var(--line-strong); | |
| border-radius: 4px; | |
| background: var(--surface-raised); | |
| color: var(--faint); | |
| font-size: 9px; | |
| } | |
| .filter-row { | |
| display: flex; | |
| gap: 7px; | |
| margin-top: 9px; | |
| } | |
| .filter-chip { | |
| display: inline-flex; | |
| height: 28px; | |
| gap: 5px; | |
| align-items: center; | |
| padding: 0 9px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .filter-chip svg { | |
| width: 13px; | |
| height: 13px; | |
| } | |
| .filter-chip.is-active { | |
| border-color: #92d4f3; | |
| background: var(--comment-soft); | |
| color: var(--comment-ink); | |
| } | |
| #required-filter.is-active { | |
| border-color: #df9da3; | |
| background: var(--required-soft); | |
| color: #8f252e; | |
| } | |
| .outline-label { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 15px 16px 8px; | |
| color: var(--faint); | |
| font-size: 9px; | |
| font-weight: 650; | |
| text-transform: uppercase; | |
| } | |
| .outline-list { | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 2px 8px 18px; | |
| } | |
| .outline-item { | |
| display: grid; | |
| grid-template-columns: 22px minmax(0, 1fr) auto; | |
| width: 100%; | |
| min-height: 38px; | |
| gap: 7px; | |
| align-items: center; | |
| padding: 6px 8px; | |
| border: 0; | |
| border-radius: 5px; | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .outline-item:hover, | |
| .outline-item.is-active { | |
| background: #f0efec; | |
| color: var(--ink); | |
| } | |
| .outline-item.is-active { | |
| box-shadow: inset 3px 0 var(--accent); | |
| } | |
| .outline-icon { | |
| display: grid; | |
| width: 22px; | |
| height: 22px; | |
| place-items: center; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| background: var(--surface); | |
| } | |
| .outline-icon svg { | |
| width: 12px; | |
| height: 12px; | |
| } | |
| .outline-name { | |
| overflow: hidden; | |
| font-size: 11px; | |
| font-weight: 550; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .outline-count { | |
| display: grid; | |
| min-width: 21px; | |
| height: 19px; | |
| place-items: center; | |
| padding: 0 5px; | |
| border-radius: 10px; | |
| background: var(--comment-soft); | |
| color: var(--comment-ink); | |
| font-size: 9px; | |
| font-weight: 650; | |
| } | |
| .outline-foot { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| border-top: 1px solid var(--line); | |
| color: var(--faint); | |
| font-size: 10px; | |
| } | |
| .outline-foot a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .schema-workspace { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr); | |
| min-width: 0; | |
| min-height: 0; | |
| background: var(--surface); | |
| } | |
| .workspace-toolbar { | |
| display: flex; | |
| min-height: 76px; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 22px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .workspace-title { | |
| display: grid; | |
| gap: 4px; | |
| min-width: 0; | |
| } | |
| .workspace-title > div { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| min-width: 0; | |
| } | |
| .eyebrow { | |
| color: var(--faint); | |
| font-size: 9px; | |
| font-weight: 650; | |
| text-transform: uppercase; | |
| } | |
| h1, | |
| h2, | |
| p { | |
| margin: 0; | |
| } | |
| .workspace-title h1, | |
| .summary-control-head h1 { | |
| overflow: hidden; | |
| font-size: 17px; | |
| font-weight: 650; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .comment-total { | |
| padding: 3px 7px; | |
| border-radius: 10px; | |
| background: var(--comment-soft); | |
| color: var(--comment-ink); | |
| font-size: 9px; | |
| font-weight: 650; | |
| white-space: nowrap; | |
| } | |
| .toolbar-actions, | |
| .summary-actions { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .button { | |
| display: inline-flex; | |
| min-height: 34px; | |
| gap: 7px; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 12px; | |
| border: 1px solid transparent; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 11px; | |
| font-weight: 650; | |
| white-space: nowrap; | |
| } | |
| .button svg { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .button.primary { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| .button.primary:hover { | |
| background: var(--accent-hover); | |
| } | |
| .button.secondary { | |
| border-color: var(--line-strong); | |
| background: var(--surface); | |
| color: var(--ink); | |
| } | |
| .button.secondary:hover { | |
| background: var(--surface-raised); | |
| } | |
| .button:disabled { | |
| cursor: wait; | |
| opacity: 0.6; | |
| } | |
| .schema-scroll { | |
| min-width: 0; | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 14px 22px 80px; | |
| scroll-behavior: smooth; | |
| } | |
| .schema-key { | |
| display: flex; | |
| gap: 14px; | |
| justify-content: flex-end; | |
| padding: 0 2px 10px; | |
| color: var(--faint); | |
| font-size: 9px; | |
| } | |
| .schema-key > span { | |
| display: inline-flex; | |
| gap: 5px; | |
| align-items: center; | |
| } | |
| .key-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| } | |
| .key-dot.required { | |
| background: var(--required); | |
| } | |
| .key-dot.commented { | |
| background: var(--comment); | |
| } | |
| .schema-tree { | |
| max-width: 1040px; | |
| margin: 0 auto; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: var(--surface); | |
| } | |
| .schema-node { | |
| position: relative; | |
| } | |
| .schema-node + .schema-node { | |
| border-top: 1px solid var(--line); | |
| } | |
| .schema-node.is-hidden { | |
| display: none; | |
| } | |
| .schema-row { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: 24px minmax(0, 1fr) auto; | |
| min-height: 48px; | |
| gap: 8px; | |
| align-items: start; | |
| padding: 8px 11px 8px 8px; | |
| background: var(--surface); | |
| } | |
| .schema-row:hover, | |
| .schema-node.is-selected > .schema-row { | |
| background: #f7fbfd; | |
| } | |
| .schema-node.is-selected > .schema-row { | |
| box-shadow: inset 3px 0 var(--accent); | |
| } | |
| .schema-toggle { | |
| display: grid; | |
| width: 24px; | |
| height: 24px; | |
| place-items: center; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 4px; | |
| background: transparent; | |
| color: var(--faint); | |
| cursor: pointer; | |
| } | |
| .schema-toggle:hover { | |
| background: var(--surface-raised); | |
| color: var(--ink); | |
| } | |
| .schema-toggle svg { | |
| width: 14px; | |
| height: 14px; | |
| transition: transform 140ms ease; | |
| } | |
| .schema-node.is-collapsed > .schema-row .schema-toggle svg { | |
| transform: rotate(-90deg); | |
| } | |
| .schema-toggle.is-leaf { | |
| cursor: default; | |
| opacity: 0.28; | |
| } | |
| .schema-main { | |
| min-width: 0; | |
| padding-top: 1px; | |
| } | |
| .schema-heading { | |
| display: flex; | |
| min-width: 0; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| align-items: center; | |
| } | |
| .schema-name { | |
| overflow-wrap: anywhere; | |
| color: #2c2e36; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .required-mark { | |
| color: var(--required); | |
| font-size: 13px; | |
| font-weight: 650; | |
| } | |
| .schema-badge { | |
| display: inline-flex; | |
| min-height: 18px; | |
| align-items: center; | |
| padding: 1px 6px; | |
| border: 1px solid var(--line); | |
| border-radius: 9px; | |
| background: var(--surface-raised); | |
| color: var(--muted); | |
| font-size: 8px; | |
| font-weight: 650; | |
| } | |
| .schema-badge.type-object, | |
| .schema-badge.type-array { | |
| border-color: #92d4f3; | |
| background: var(--accent-soft); | |
| color: var(--accent-ink); | |
| } | |
| .schema-badge.ref { | |
| border-color: var(--line-strong); | |
| background: #eeece8; | |
| color: var(--muted); | |
| } | |
| .schema-description { | |
| max-width: 760px; | |
| margin-top: 4px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| line-height: 1.42; | |
| } | |
| .schema-example { | |
| display: flex; | |
| max-width: 760px; | |
| min-width: 0; | |
| flex-wrap: wrap; | |
| gap: 5px 7px; | |
| align-items: baseline; | |
| margin-top: 6px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| line-height: 1.42; | |
| } | |
| .schema-example-label { | |
| flex: 0 0 auto; | |
| color: var(--faint); | |
| font-size: 8px; | |
| font-weight: 650; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .schema-example code { | |
| min-width: 0; | |
| padding: 2px 5px; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| background: var(--surface-raised); | |
| color: var(--ink); | |
| font-size: 9px; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .schema-formula { | |
| display: flex; | |
| max-width: 760px; | |
| gap: 7px; | |
| align-items: flex-start; | |
| margin-top: 6px; | |
| padding: 6px 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| background: var(--surface-raised); | |
| } | |
| .formula-label { | |
| flex: 0 0 auto; | |
| padding-top: 2px; | |
| color: var(--faint); | |
| font-size: 8px; | |
| font-weight: 650; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .formula-tex { | |
| min-width: 0; | |
| overflow-x: auto; | |
| color: var(--ink); | |
| font-size: 12px; | |
| } | |
| .formula-tex mjx-container[display="true"] { | |
| margin: 0 ; | |
| text-align: left ; | |
| } | |
| .field-source-link { | |
| display: inline-flex; | |
| width: fit-content; | |
| margin-top: 5px; | |
| color: var(--accent-ink); | |
| font-size: 9px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| } | |
| .field-source-link:hover { | |
| color: var(--accent-hover); | |
| text-decoration: underline; | |
| } | |
| .schema-constraints { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| margin-top: 5px; | |
| } | |
| .constraint { | |
| padding: 2px 5px; | |
| border-radius: 4px; | |
| background: #eeece8; | |
| color: #5c5a55; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 8px; | |
| } | |
| .comment-pin { | |
| position: sticky; | |
| right: 8px; | |
| display: inline-flex; | |
| min-width: 28px; | |
| height: 28px; | |
| gap: 4px; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 1px; | |
| padding: 0 7px; | |
| border: 1px solid #92d4f3; | |
| border-radius: 14px; | |
| background: var(--comment-soft); | |
| color: var(--comment-ink); | |
| cursor: pointer; | |
| font-size: 9px; | |
| font-weight: 650; | |
| } | |
| .comment-pin:hover, | |
| .comment-pin.is-active { | |
| border-color: var(--comment); | |
| background: #d9eff9; | |
| } | |
| .comment-pin svg { | |
| width: 13px; | |
| height: 13px; | |
| } | |
| .comment-pin.add-comment { | |
| visibility: hidden; | |
| border-color: var(--line); | |
| background: var(--surface); | |
| color: var(--faint); | |
| } | |
| .schema-row:hover .comment-pin.add-comment, | |
| .schema-node.is-selected > .schema-row .comment-pin.add-comment { | |
| visibility: visible; | |
| } | |
| .schema-children { | |
| position: relative; | |
| margin-left: 20px; | |
| padding-left: 14px; | |
| border-left: 1px solid var(--line-strong); | |
| } | |
| .schema-node.is-collapsed > .schema-children { | |
| display: none; | |
| } | |
| .schema-children > .schema-node::before { | |
| position: absolute; | |
| top: 23px; | |
| left: -14px; | |
| width: 13px; | |
| height: 1px; | |
| background: var(--line-strong); | |
| content: ""; | |
| } | |
| .schema-root > .schema-row { | |
| min-height: 58px; | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| background: var(--surface-raised); | |
| } | |
| .schema-root > .schema-children { | |
| margin-left: 0; | |
| padding-left: 0; | |
| border-left: 0; | |
| } | |
| .schema-root > .schema-children > .schema-node::before { | |
| display: none; | |
| } | |
| .schema-empty { | |
| display: grid; | |
| min-height: 240px; | |
| place-items: center; | |
| padding: 40px; | |
| color: var(--muted); | |
| } | |
| .thread-panel { | |
| position: relative; | |
| z-index: 5; | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr) auto; | |
| min-width: 0; | |
| min-height: 0; | |
| overflow: hidden; | |
| border-left: 1px solid var(--line); | |
| background: var(--surface-raised); | |
| transform: translateX(100%); | |
| transition: transform 180ms ease; | |
| } | |
| .thread-open .thread-panel { | |
| transform: translateX(0); | |
| } | |
| .thread-head { | |
| display: flex; | |
| min-height: 90px; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| padding: 17px 16px 14px; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--surface); | |
| } | |
| .thread-head > div { | |
| min-width: 0; | |
| } | |
| .thread-head h2 { | |
| max-width: 300px; | |
| margin: 4px 0 5px; | |
| overflow: hidden; | |
| font-size: 15px; | |
| font-weight: 650; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .thread-head code { | |
| display: block; | |
| max-width: 320px; | |
| overflow: hidden; | |
| color: var(--muted); | |
| font-size: 9px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .thread-list { | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 15px; | |
| } | |
| .thread-empty { | |
| display: grid; | |
| min-height: 160px; | |
| align-content: center; | |
| justify-items: center; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .thread-empty svg { | |
| width: 24px; | |
| height: 24px; | |
| margin-bottom: 9px; | |
| color: var(--faint); | |
| } | |
| .thread-empty p { | |
| max-width: 220px; | |
| font-size: 11px; | |
| line-height: 1.45; | |
| } | |
| .thread-comment { | |
| position: relative; | |
| margin-bottom: 10px; | |
| padding: 12px; | |
| border: 1px solid #b9deef; | |
| border-radius: 7px; | |
| background: #f3fafe; | |
| } | |
| .thread-comment.is-resolved { | |
| border-color: var(--line); | |
| background: #f5f4f1; | |
| opacity: 0.75; | |
| } | |
| .comment-meta { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .comment-author { | |
| display: flex; | |
| min-width: 0; | |
| gap: 7px; | |
| align-items: center; | |
| font-size: 10px; | |
| font-weight: 650; | |
| } | |
| .comment-avatar { | |
| display: grid; | |
| width: 24px; | |
| height: 24px; | |
| flex: 0 0 24px; | |
| place-items: center; | |
| border-radius: 50%; | |
| background: #2c2e36; | |
| color: #fff; | |
| font-size: 8px; | |
| } | |
| .comment-source { | |
| color: var(--faint); | |
| font-size: 8px; | |
| font-weight: 500; | |
| } | |
| .resolve-button { | |
| display: grid; | |
| width: 26px; | |
| height: 26px; | |
| place-items: center; | |
| padding: 0; | |
| border: 1px solid #b9deef; | |
| border-radius: 5px; | |
| background: transparent; | |
| color: var(--accent-ink); | |
| cursor: pointer; | |
| } | |
| .resolve-button:hover, | |
| .is-resolved .resolve-button { | |
| border-color: #92d4f3; | |
| background: #eaf6fb; | |
| color: var(--accent-ink); | |
| } | |
| .resolve-button svg { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .comment-body { | |
| color: #2c2e36; | |
| font-size: 11px; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| } | |
| .comment-decision { | |
| margin-top: 10px; | |
| padding-top: 9px; | |
| border-top: 1px solid #cfe9f4; | |
| color: var(--accent-ink); | |
| font-size: 10px; | |
| line-height: 1.45; | |
| } | |
| .comment-date { | |
| margin-top: 9px; | |
| color: var(--faint); | |
| font-size: 8px; | |
| } | |
| .comment-form { | |
| display: grid; | |
| gap: 9px; | |
| padding: 14px 15px 16px; | |
| border-top: 1px solid var(--line); | |
| background: var(--surface); | |
| } | |
| .comment-form label, | |
| .field-control { | |
| display: grid; | |
| gap: 5px; | |
| } | |
| .comment-form label > span, | |
| .field-control > span { | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 650; | |
| } | |
| .comment-form input, | |
| .comment-form textarea, | |
| .field-control input, | |
| .field-control textarea, | |
| .field-control select { | |
| width: 100%; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 6px; | |
| outline: 0; | |
| background: var(--surface); | |
| color: var(--ink); | |
| font-size: 11px; | |
| } | |
| .comment-form input, | |
| .field-control input, | |
| .field-control select { | |
| height: 35px; | |
| padding: 0 9px; | |
| } | |
| .comment-form textarea, | |
| .field-control textarea { | |
| min-height: 70px; | |
| padding: 9px; | |
| resize: vertical; | |
| line-height: 1.45; | |
| } | |
| .comment-form input:focus, | |
| .comment-form textarea:focus, | |
| .field-control input:focus, | |
| .field-control textarea:focus, | |
| .field-control select:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(91, 172, 209, 0.12); | |
| } | |
| .comment-form .button { | |
| justify-self: end; | |
| } | |
| .summary-view { | |
| grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); | |
| min-height: 0; | |
| } | |
| .summary-controls { | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 28px 26px 60px; | |
| border-right: 1px solid var(--line); | |
| background: var(--surface-raised); | |
| } | |
| .summary-control-head { | |
| margin-bottom: 24px; | |
| } | |
| .summary-control-head h1 { | |
| margin-top: 5px; | |
| } | |
| .summary-controls .field-control { | |
| margin-bottom: 16px; | |
| } | |
| .context-control textarea { | |
| min-height: 210px; | |
| } | |
| .endpoint-disclosure { | |
| margin: 6px 0 20px; | |
| border-top: 1px solid var(--line); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .endpoint-disclosure > button { | |
| display: flex; | |
| width: 100%; | |
| min-height: 45px; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| cursor: pointer; | |
| color: var(--ink); | |
| font-size: 11px; | |
| font-weight: 650; | |
| } | |
| .endpoint-disclosure > button > span { | |
| display: inline-flex; | |
| gap: 7px; | |
| align-items: center; | |
| } | |
| .endpoint-disclosure svg { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .endpoint-disclosure.is-open > button > svg { | |
| transform: rotate(180deg); | |
| } | |
| .endpoint-fields { | |
| display: none; | |
| padding: 3px 0 4px; | |
| } | |
| .endpoint-disclosure.is-open .endpoint-fields { | |
| display: block; | |
| } | |
| .summary-actions { | |
| justify-content: flex-end; | |
| } | |
| .summary-output { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr); | |
| min-width: 0; | |
| min-height: 0; | |
| background: var(--surface); | |
| } | |
| .summary-output-head { | |
| display: flex; | |
| min-height: 76px; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 13px 28px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .summary-output-head h2 { | |
| margin-top: 4px; | |
| font-size: 17px; | |
| font-weight: 650; | |
| } | |
| .markdown-body { | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 34px clamp(28px, 7vw, 92px) 100px; | |
| color: #2c2e36; | |
| font-size: 12px; | |
| line-height: 1.7; | |
| } | |
| .markdown-body > * { | |
| max-width: 850px; | |
| } | |
| .markdown-body h1 { | |
| margin: 0 0 22px; | |
| color: var(--ink); | |
| font-size: 24px; | |
| font-weight: 650; | |
| } | |
| .markdown-body h2 { | |
| margin: 30px 0 10px; | |
| padding-bottom: 7px; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--ink); | |
| font-size: 14px; | |
| font-weight: 650; | |
| } | |
| .markdown-body ul { | |
| margin: 8px 0 20px; | |
| padding-left: 20px; | |
| } | |
| .markdown-body li { | |
| margin-bottom: 8px; | |
| } | |
| .markdown-body code { | |
| padding: 2px 5px; | |
| border-radius: 4px; | |
| background: #eeece8; | |
| color: var(--code); | |
| font-size: 10px; | |
| } | |
| .empty-summary { | |
| display: grid; | |
| min-height: 300px; | |
| align-content: center; | |
| justify-items: center; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .empty-summary svg { | |
| width: 30px; | |
| height: 30px; | |
| margin-bottom: 12px; | |
| color: var(--faint); | |
| } | |
| .empty-summary p { | |
| max-width: 260px; | |
| } | |
| .toast { | |
| position: fixed; | |
| right: 20px; | |
| bottom: 20px; | |
| z-index: 100; | |
| max-width: 360px; | |
| padding: 10px 13px; | |
| border: 1px solid #b9deef; | |
| border-radius: 6px; | |
| background: #f3fafe; | |
| box-shadow: var(--shadow); | |
| color: var(--accent-ink); | |
| font-size: 11px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transform: translateY(8px); | |
| transition: opacity 150ms ease, transform 150ms ease; | |
| } | |
| .toast.is-visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .toast.is-error { | |
| border-color: #e4b3b7; | |
| background: #fff1f2; | |
| color: #8f252e; | |
| } | |
| @media (max-width: 1180px) { | |
| #review-view, | |
| #review-view.thread-open { | |
| grid-template-columns: 230px minmax(0, 1fr); | |
| } | |
| .thread-panel { | |
| position: absolute; | |
| top: 60px; | |
| right: 0; | |
| bottom: 0; | |
| width: min(410px, calc(100vw - 40px)); | |
| box-shadow: var(--shadow); | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .topbar { | |
| grid-template-columns: 1fr auto; | |
| } | |
| .save-state, | |
| .topbar-actions .icon-button { | |
| display: none; | |
| } | |
| .brand { | |
| gap: 6px; | |
| } | |
| .brand-mark { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .brand-copy { | |
| display: grid; | |
| } | |
| .benchmark-select { | |
| max-width: min(30vw, 125px); | |
| font-size: 10px; | |
| } | |
| #benchmark-subtitle { | |
| display: none; | |
| } | |
| .view-tabs { | |
| justify-self: end; | |
| } | |
| #review-view, | |
| #review-view.thread-open { | |
| grid-template-columns: 1fr; | |
| } | |
| .outline-panel { | |
| display: none; | |
| } | |
| .workspace-toolbar { | |
| min-height: 68px; | |
| padding: 10px 13px; | |
| } | |
| .toolbar-actions .icon-button { | |
| display: none; | |
| } | |
| .button { | |
| padding: 0 9px; | |
| } | |
| .schema-scroll { | |
| padding: 10px 8px 70px; | |
| } | |
| .schema-key { | |
| display: none; | |
| } | |
| .schema-tree { | |
| border-right: 0; | |
| border-left: 0; | |
| border-radius: 0; | |
| } | |
| .schema-children { | |
| margin-left: 9px; | |
| padding-left: 7px; | |
| } | |
| .schema-children > .schema-node::before { | |
| left: -7px; | |
| width: 6px; | |
| } | |
| .summary-view { | |
| grid-template-columns: 1fr; | |
| overflow: auto; | |
| } | |
| .summary-controls, | |
| .summary-output { | |
| overflow: visible; | |
| } | |
| .summary-controls { | |
| padding: 22px 18px 30px; | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .summary-output { | |
| min-height: 600px; | |
| } | |
| .markdown-body { | |
| overflow: visible; | |
| padding: 26px 18px 80px; | |
| } | |
| } | |
| .results-view { | |
| overflow: auto; | |
| padding: 26px clamp(16px, 2.5vw, 38px) 44px; | |
| } | |
| .results-view.is-active { | |
| display: block; | |
| } | |
| .results-shell { | |
| width: min(100%, 1720px); | |
| margin: 0 auto; | |
| } | |
| .results-header { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 24px; | |
| margin-bottom: 20px; | |
| } | |
| .results-header h1 { | |
| margin: 5px 0 3px; | |
| font-size: 25px; | |
| letter-spacing: -0.035em; | |
| } | |
| .results-header p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .results-schema-switcher { | |
| display: grid; | |
| min-width: min(330px, 40vw); | |
| gap: 6px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .results-schema-switcher select { | |
| min-height: 38px; | |
| padding: 0 11px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 6px; | |
| background: var(--surface); | |
| color: var(--ink); | |
| } | |
| .results-empty { | |
| max-width: 720px; | |
| margin: 46px auto; | |
| padding: 32px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: var(--surface); | |
| color: var(--muted); | |
| line-height: 1.65; | |
| text-align: center; | |
| } | |
| .results-empty h2 { | |
| margin: 5px 0 8px; | |
| color: var(--ink); | |
| font-size: 21px; | |
| } | |
| .results-empty p { | |
| margin: 0 auto 18px; | |
| max-width: 590px; | |
| } | |
| .results-summary-row { | |
| display: flex; | |
| align-items: stretch; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| } | |
| .result-stat { | |
| display: grid; | |
| min-width: 120px; | |
| gap: 5px; | |
| padding: 11px 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: var(--surface); | |
| } | |
| .result-stat span { | |
| color: var(--muted); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .result-stat strong { | |
| font-size: 13px; | |
| } | |
| .results-source-link { | |
| align-self: center; | |
| margin-left: auto; | |
| } | |
| .results-caveats { | |
| display: grid; | |
| gap: 5px; | |
| margin: 0 0 16px; | |
| padding: 12px 16px 12px 31px; | |
| border: 1px solid #eadfbf; | |
| border-radius: 7px; | |
| background: #fffaf0; | |
| color: #655632; | |
| font-size: 11px; | |
| line-height: 1.5; | |
| } | |
| .results-layout { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.8fr); | |
| align-items: start; | |
| gap: 14px; | |
| } | |
| .leaderboard-wrap { | |
| max-height: calc(100vh - 335px); | |
| min-height: 340px; | |
| overflow: auto; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--surface); | |
| } | |
| .leaderboard-table { | |
| width: 100%; | |
| min-width: 900px; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-size: 11px; | |
| } | |
| .leaderboard-table th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| padding: 10px 9px; | |
| border-bottom: 1px solid var(--line-strong); | |
| background: #f6f5f2; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 650; | |
| text-align: left; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .leaderboard-table td { | |
| max-width: 280px; | |
| padding: 9px; | |
| border-bottom: 1px solid var(--line); | |
| color: #37352f; | |
| line-height: 1.4; | |
| vertical-align: top; | |
| } | |
| .leaderboard-table tbody tr:hover td, | |
| .leaderboard-table tbody tr.is-selected td { | |
| background: #f0f8fb; | |
| } | |
| .leaderboard-table a { | |
| color: var(--accent-ink); | |
| text-decoration: none; | |
| } | |
| .leaderboard-table a:hover { | |
| text-decoration: underline; | |
| } | |
| .rank-button { | |
| min-width: 28px; | |
| padding: 2px 5px; | |
| border: 1px solid transparent; | |
| border-radius: 4px; | |
| background: transparent; | |
| color: var(--ink); | |
| font-weight: 650; | |
| cursor: pointer; | |
| } | |
| .rank-button:hover, | |
| .is-selected .rank-button { | |
| border-color: #b7d8e6; | |
| background: #eaf6fb; | |
| } | |
| .pareto-tag, | |
| .verified-tag, | |
| .unverified-tag { | |
| display: inline-block; | |
| margin: 3px 0 0 5px; | |
| padding: 2px 5px; | |
| border-radius: 4px; | |
| background: #eef4e9; | |
| color: #49683d; | |
| font-size: 9px; | |
| white-space: nowrap; | |
| } | |
| .unverified-tag { | |
| background: #f3f1ec; | |
| color: var(--muted); | |
| } | |
| .verified-tag { | |
| margin: 0; | |
| } | |
| .trace-row-link { | |
| display: inline-grid; | |
| width: 25px; | |
| height: 25px; | |
| place-items: center; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| } | |
| .trace-row-link svg { | |
| width: 13px; | |
| height: 13px; | |
| } | |
| .trace-detail { | |
| min-width: 0; | |
| } | |
| .trace-card { | |
| padding: 16px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: var(--surface); | |
| } | |
| .trace-card-head { | |
| display: flex; | |
| align-items: start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .trace-card h3 { | |
| margin: 4px 0 2px; | |
| font-size: 15px; | |
| line-height: 1.35; | |
| } | |
| .trace-card-head p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 10px; | |
| line-height: 1.5; | |
| } | |
| .outcome-pill { | |
| flex: 0 0 auto; | |
| padding: 4px 7px; | |
| border-radius: 12px; | |
| background: #fff0e9; | |
| color: #944b2f; | |
| font-size: 9px; | |
| font-weight: 650; | |
| text-transform: uppercase; | |
| } | |
| .outcome-pill.is-success { | |
| background: #edf5e9; | |
| color: #47683c; | |
| } | |
| .trace-meta { | |
| display: flex; | |
| gap: 14px; | |
| margin: 14px 0 9px; | |
| } | |
| .trace-meta div { | |
| min-width: 0; | |
| } | |
| .trace-meta dt, | |
| .trace-section-label { | |
| margin-bottom: 4px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 650; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .trace-meta dd { | |
| margin: 0; | |
| font-size: 10px; | |
| } | |
| .trace-meta code { | |
| overflow-wrap: anywhere; | |
| } | |
| .trace-source-note, | |
| .results-footnote { | |
| color: var(--muted); | |
| font-size: 10px; | |
| line-height: 1.5; | |
| } | |
| .trace-result, | |
| .trace-event pre { | |
| overflow: auto; | |
| max-height: 230px; | |
| margin: 7px 0 10px; | |
| padding: 9px; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| background: #f8f7f4; | |
| color: #36342f; | |
| font: 10px/1.55 "IBM Plex Mono", ui-monospace, monospace; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| .trace-events { | |
| display: grid; | |
| gap: 8px; | |
| max-height: 540px; | |
| overflow: auto; | |
| margin: 10px 0 12px; | |
| } | |
| .trace-event { | |
| min-width: 0; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: #fcfbf9; | |
| } | |
| .trace-event > header { | |
| display: flex; | |
| gap: 8px; | |
| align-items: start; | |
| margin-bottom: 8px; | |
| } | |
| .trace-event-number { | |
| display: grid; | |
| width: 19px; | |
| height: 19px; | |
| flex: 0 0 19px; | |
| place-items: center; | |
| border-radius: 50%; | |
| background: var(--accent-soft); | |
| color: var(--accent-ink); | |
| font-size: 9px; | |
| } | |
| .trace-event > header div { | |
| display: grid; | |
| gap: 3px; | |
| min-width: 0; | |
| } | |
| .trace-event > header strong { | |
| font-size: 10px; | |
| overflow-wrap: anywhere; | |
| } | |
| .trace-event > header span { | |
| color: var(--muted); | |
| font-size: 9px; | |
| } | |
| .trace-message { | |
| margin: 6px 0; | |
| padding: 7px; | |
| border-left: 2px solid #c5deea; | |
| background: #f4f9fb; | |
| } | |
| .trace-message b { | |
| color: var(--accent-ink); | |
| font-size: 9px; | |
| } | |
| .trace-message p { | |
| margin: 4px 0 0; | |
| color: #35332e; | |
| font-size: 10px; | |
| line-height: 1.5; | |
| overflow-wrap: anywhere; | |
| } | |
| .trace-message small { | |
| display: block; | |
| margin-top: 4px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| } | |
| .trace-tool-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| margin-top: 6px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| } | |
| .trace-tool-list span { | |
| padding: 2px 5px; | |
| border-radius: 4px; | |
| background: #efeee9; | |
| } | |
| .trace-unavailable { | |
| margin: 13px 0; | |
| padding: 12px; | |
| border: 1px solid #eadfbf; | |
| border-radius: 6px; | |
| background: #fffaf0; | |
| color: #655632; | |
| font-size: 10px; | |
| line-height: 1.5; | |
| } | |
| .trace-unavailable p { | |
| margin: 4px 0 0; | |
| } | |
| .trace-download { | |
| margin-top: 8px; | |
| } | |
| .trace-download svg, | |
| .results-source-link svg { | |
| width: 14px; | |
| height: 14px; | |
| margin-right: 5px; | |
| } | |
| .results-footnote { | |
| margin: 12px 2px 0; | |
| } | |
| .reliability-table { | |
| min-width: 1620px; | |
| font-size: 10px; | |
| } | |
| .reliability-table th, | |
| .reliability-table td { | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .reliability-table th:nth-child(1), | |
| .reliability-table th:nth-child(2), | |
| .reliability-table td:nth-child(1), | |
| .reliability-table td:nth-child(2) { | |
| text-align: left; | |
| } | |
| .reliability-table .reliability-agent { | |
| min-width: 155px; | |
| font-weight: 600; | |
| } | |
| .reliability-table .reliability-accuracy { | |
| font-weight: 650; | |
| } | |
| .reliability-table .reliability-score { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 10px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .leaderboard-table .grouped-table-head tr:first-child th { | |
| top: 0; | |
| z-index: 4; | |
| height: 32px; | |
| border-right: 1px solid #e3e1dc; | |
| text-align: center; | |
| } | |
| .leaderboard-table .grouped-table-head tr:nth-child(2) th { | |
| top: 32px; | |
| z-index: 3; | |
| background: #efeee9; | |
| text-align: center; | |
| } | |
| .reliability-quick-stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| margin: 14px 0 10px; | |
| } | |
| .reliability-quick-stats > div { | |
| display: grid; | |
| gap: 5px; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: #f8f7f4; | |
| } | |
| .reliability-quick-stats span, | |
| .trace-evaluation > div span { | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 650; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .reliability-quick-stats strong { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 15px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .reliability-metric-groups { | |
| display: grid; | |
| gap: 7px; | |
| margin: 10px 0; | |
| } | |
| .reliability-metric-group { | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: #fcfbf9; | |
| } | |
| .reliability-metric-group h4 { | |
| margin: 0 0 3px; | |
| font-size: 11px; | |
| } | |
| .reliability-metric-group header p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.45; | |
| } | |
| .reliability-metric-group dl { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 5px 10px; | |
| margin: 9px 0 0; | |
| } | |
| .reliability-metric-group dl div { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 6px; | |
| min-width: 0; | |
| padding-top: 5px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .reliability-metric-group dt { | |
| color: var(--muted); | |
| font-size: 9px; | |
| } | |
| .reliability-metric-group dd { | |
| margin: 0; | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 10px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .trace-source-count, | |
| .trace-event-note, | |
| .trace-span-id { | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.45; | |
| } | |
| .trace-source-count { | |
| margin: 6px 0; | |
| } | |
| .trace-task-question { | |
| margin: 12px 0; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: #f8f7f4; | |
| } | |
| .trace-task-question p { | |
| margin: 5px 0 0; | |
| color: var(--ink); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| } | |
| .trace-evaluation { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| margin: 10px 0; | |
| } | |
| .trace-evaluation > div { | |
| display: grid; | |
| gap: 5px; | |
| padding: 9px; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: #f8f7f4; | |
| } | |
| .trace-evaluation > div strong { | |
| font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| font-size: 14px; | |
| } | |
| .trace-evaluation p { | |
| grid-column: 1 / -1; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.45; | |
| } | |
| .trace-extraction { | |
| margin: 12px 0; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: #fff; | |
| } | |
| .trace-extraction > summary { | |
| display: flex; | |
| align-items: start; | |
| justify-content: space-between; | |
| gap: 10px; | |
| padding: 10px; | |
| color: var(--ink); | |
| font-size: 11px; | |
| font-weight: 650; | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| .trace-extraction > summary::-webkit-details-marker, | |
| .coverage-group > summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .trace-extraction > summary::after, | |
| .coverage-group > summary::after { | |
| content: "+"; | |
| color: var(--muted); | |
| } | |
| .trace-extraction[open] > summary::after, | |
| .coverage-group[open] > summary::after { | |
| content: "−"; | |
| } | |
| .trace-extraction > summary small { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: end; | |
| gap: 4px; | |
| font-weight: 500; | |
| } | |
| .coverage-count, | |
| .coverage-status { | |
| display: inline-flex; | |
| align-items: center; | |
| width: fit-content; | |
| padding: 2px 5px; | |
| border-radius: 10px; | |
| font-size: 8px; | |
| font-weight: 650; | |
| line-height: 1.35; | |
| white-space: nowrap; | |
| } | |
| .coverage-status-present { | |
| background: #eaf3e6; | |
| color: #41643a; | |
| } | |
| .coverage-status-derivable { | |
| background: #e7f1f7; | |
| color: #2c5f78; | |
| } | |
| .coverage-status-partial { | |
| background: #fff1d9; | |
| color: #805b16; | |
| } | |
| .coverage-status-not-observed { | |
| background: #efeee9; | |
| color: #66635d; | |
| } | |
| .coverage-legend { | |
| margin: 0; | |
| padding: 0 10px 9px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.45; | |
| } | |
| .coverage-groups { | |
| display: grid; | |
| gap: 5px; | |
| padding: 0 8px 8px; | |
| } | |
| .coverage-group { | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| background: #fcfbf9; | |
| } | |
| .coverage-group > summary { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 8px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| .coverage-group > summary small { | |
| margin-left: auto; | |
| color: var(--muted); | |
| font-size: 8px; | |
| font-weight: 500; | |
| } | |
| .coverage-fields { | |
| display: grid; | |
| gap: 5px; | |
| padding: 0 7px 7px; | |
| } | |
| .coverage-field { | |
| min-width: 0; | |
| padding: 7px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .coverage-field > div { | |
| display: flex; | |
| align-items: start; | |
| justify-content: space-between; | |
| gap: 6px; | |
| } | |
| .coverage-field code { | |
| min-width: 0; | |
| color: #37352f; | |
| font: 9px/1.45 "IBM Plex Mono", ui-monospace, monospace; | |
| overflow-wrap: anywhere; | |
| } | |
| .coverage-field p { | |
| margin: 5px 0 0; | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.45; | |
| } | |
| .trace-action pre { | |
| overflow: auto; | |
| margin: 5px 0; | |
| padding: 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| background: #f8f7f4; | |
| font: 9px/1.5 "IBM Plex Mono", ui-monospace, monospace; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| .trace-usage { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin: 7px 0; | |
| } | |
| .trace-usage span { | |
| padding: 3px 6px; | |
| border-radius: 4px; | |
| background: #efeee9; | |
| color: #56534c; | |
| font-size: 8px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .trace-span-id { | |
| display: block; | |
| overflow-wrap: anywhere; | |
| } | |
| @media (max-width: 1100px) { | |
| .results-layout { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .trace-detail { | |
| order: -1; | |
| } | |
| .leaderboard-wrap { | |
| max-height: 55vh; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .results-view { | |
| padding: 18px 12px 34px; | |
| } | |
| .results-header { | |
| display: grid; | |
| align-items: start; | |
| gap: 14px; | |
| } | |
| .results-header h1 { | |
| font-size: 21px; | |
| } | |
| .results-schema-switcher { | |
| min-width: 0; | |
| } | |
| .results-summary-row { | |
| flex-wrap: wrap; | |
| } | |
| .result-stat { | |
| min-width: calc(50% - 5px); | |
| flex: 1; | |
| } | |
| .results-source-link { | |
| margin-left: 0; | |
| } | |
| .results-empty { | |
| margin: 26px auto; | |
| padding: 22px 16px; | |
| } | |
| } | |
| .trace-inventory-panel { | |
| margin-top: 24px; | |
| padding: 18px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fff; | |
| } | |
| .trace-inventory-panel[hidden] { | |
| display: none; | |
| } | |
| .trace-inventory-head { | |
| display: flex; | |
| align-items: start; | |
| justify-content: space-between; | |
| gap: 18px; | |
| margin-bottom: 14px; | |
| } | |
| .trace-inventory-head h2 { | |
| margin: 3px 0 5px; | |
| color: var(--ink); | |
| font-size: 17px; | |
| font-weight: 650; | |
| } | |
| .trace-inventory-head p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| } | |
| .trace-inventory-total { | |
| max-width: 360px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| line-height: 1.55; | |
| text-align: right; | |
| } | |
| .trace-inventory-controls { | |
| display: grid; | |
| grid-template-columns: minmax(170px, 0.7fr) minmax(220px, 1.3fr); | |
| gap: 10px; | |
| margin-bottom: 11px; | |
| } | |
| .trace-inventory-control { | |
| display: grid; | |
| gap: 5px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .trace-inventory-control select, | |
| .trace-inventory-control input { | |
| width: 100%; | |
| min-height: 34px; | |
| padding: 7px 9px; | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| outline: 0; | |
| background: #fff; | |
| color: var(--ink); | |
| font: inherit; | |
| font-size: 11px; | |
| } | |
| .trace-inventory-control select:focus, | |
| .trace-inventory-control input:focus { | |
| border-color: #817d72; | |
| box-shadow: 0 0 0 2px rgb(79 76 68 / 10%); | |
| } | |
| .trace-inventory-count { | |
| margin: 0 0 7px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .trace-inventory-layout { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(280px, 0.88fr); | |
| gap: 10px; | |
| align-items: start; | |
| } | |
| .trace-variable-list, | |
| .trace-variable-detail { | |
| min-width: 0; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: #fcfbf9; | |
| } | |
| .trace-variable-list { | |
| display: grid; | |
| max-height: 620px; | |
| overflow: auto; | |
| } | |
| .trace-variable-row { | |
| display: grid; | |
| gap: 4px; | |
| width: 100%; | |
| padding: 8px 10px; | |
| border: 0; | |
| border-bottom: 1px solid var(--line); | |
| background: transparent; | |
| color: var(--ink); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .trace-variable-row:last-child { | |
| border-bottom: 0; | |
| } | |
| .trace-variable-row:hover, | |
| .trace-variable-row.is-selected { | |
| background: #f0eee8; | |
| } | |
| .trace-variable-row code, | |
| .trace-variable-detail-head code { | |
| overflow-wrap: anywhere; | |
| color: #38362f; | |
| font: 10px/1.5 "IBM Plex Mono", ui-monospace, monospace; | |
| } | |
| .trace-variable-row small { | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.4; | |
| } | |
| .trace-variable-detail { | |
| padding: 12px; | |
| overflow-wrap: anywhere; | |
| } | |
| .trace-variable-detail > p, | |
| .trace-inventory-loading { | |
| margin: 0; | |
| padding: 14px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| line-height: 1.5; | |
| } | |
| .trace-variable-detail-head { | |
| display: grid; | |
| gap: 5px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .trace-type-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin: 9px 0; | |
| } | |
| .trace-type-chip { | |
| display: inline-flex; | |
| padding: 3px 6px; | |
| border-radius: 4px; | |
| background: #efeee9; | |
| color: #56534c; | |
| font-size: 9px; | |
| line-height: 1.4; | |
| } | |
| .trace-variable-metrics, | |
| .trace-variable-coverage, | |
| .trace-sample-source dl { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 6px; | |
| margin: 9px 0; | |
| } | |
| .trace-variable-metrics > div, | |
| .trace-variable-coverage > div, | |
| .trace-sample-source dl > div { | |
| min-width: 0; | |
| padding: 7px; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| background: #fff; | |
| } | |
| .trace-variable-metrics dt, | |
| .trace-variable-coverage dt, | |
| .trace-sample-source dt { | |
| margin-bottom: 4px; | |
| color: var(--muted); | |
| font-size: 8px; | |
| } | |
| .trace-variable-metrics dd, | |
| .trace-variable-coverage dd, | |
| .trace-sample-source dd { | |
| margin: 0; | |
| color: var(--ink); | |
| font-size: 10px; | |
| font-variant-numeric: tabular-nums; | |
| line-height: 1.45; | |
| } | |
| .trace-variable-subsection { | |
| margin-top: 11px; | |
| padding-top: 8px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .trace-variable-subsection h4 { | |
| margin: 0; | |
| color: var(--ink); | |
| font-size: 10px; | |
| font-weight: 650; | |
| } | |
| .trace-variable-subsection p { | |
| margin: 5px 0; | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.5; | |
| } | |
| .trace-inventory-pagination { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding-top: 10px; | |
| } | |
| .trace-inventory-pagination span { | |
| min-width: 72px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| text-align: center; | |
| } | |
| .trace-inventory-pagination button:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .trace-inventory-note { | |
| margin: 12px 0 0; | |
| padding-top: 9px; | |
| border-top: 1px solid var(--line); | |
| color: var(--muted); | |
| font-size: 9px; | |
| line-height: 1.55; | |
| } | |
| .trace-inventory-note a, | |
| .trace-sample-source a { | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .trace-sample-manifest { | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| background: #fcfbf9; | |
| } | |
| .trace-sample-manifest > summary { | |
| padding: 8px 10px; | |
| color: var(--ink); | |
| font-size: 10px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .trace-sample-source-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 7px; | |
| padding: 0 8px 8px; | |
| } | |
| .trace-sample-source { | |
| display: grid; | |
| min-width: 0; | |
| gap: 5px; | |
| padding: 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| background: #fff; | |
| } | |
| .trace-sample-source > div:first-child { | |
| display: grid; | |
| gap: 3px; | |
| } | |
| .trace-sample-source strong { | |
| color: var(--ink); | |
| font-size: 9px; | |
| } | |
| .trace-sample-source span, | |
| .trace-sample-source small, | |
| .trace-sample-source a { | |
| overflow-wrap: anywhere; | |
| color: var(--muted); | |
| font-size: 8px; | |
| line-height: 1.45; | |
| } | |
| .trace-sample-source code { | |
| overflow-wrap: anywhere; | |
| color: var(--ink); | |
| font: 8px/1.45 "IBM Plex Mono", ui-monospace, monospace; | |
| } | |
| .trace-sample-source dl { | |
| margin: 0; | |
| } | |
| .trace-inventory-empty h2 { | |
| margin: 5px 0; | |
| font-size: 17px; | |
| } | |
| @media (max-width: 860px) { | |
| .trace-inventory-layout { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .trace-variable-detail { | |
| order: -1; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .trace-inventory-panel { | |
| padding: 12px; | |
| } | |
| .trace-inventory-head { | |
| display: grid; | |
| } | |
| .trace-inventory-total { | |
| text-align: left; | |
| } | |
| .trace-inventory-controls, | |
| .trace-sample-source-grid { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |