Spaces:
Running
Running
| :root { | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: #202124; | |
| background: #f6f7f8; | |
| font-synthesis: none; | |
| } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; min-width: 320px; } | |
| button, input, select, textarea { font: inherit; } | |
| button, a { -webkit-tap-highlight-color: transparent; } | |
| button { cursor: pointer; } | |
| .app-shell { min-height: 100vh; display: flex; flex-direction: column; } | |
| .app-header { | |
| height: 64px; | |
| padding: 0 28px; | |
| display: grid; | |
| grid-template-columns: 220px minmax(0, 1fr) 210px; | |
| align-items: center; | |
| gap: 24px; | |
| background: #fff; | |
| border-bottom: 1px solid #e2e4e7; | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| } | |
| .brand { border: 0; background: transparent; text-align: left; padding: 0; color: inherit; } | |
| .brand strong { display: block; font-size: 16px; } | |
| .brand span { display: block; font-size: 12px; color: #767b82; margin-top: 2px; } | |
| .app-header nav { min-width: 0; display: flex; justify-content: center; align-items: center; gap: 14px; overflow-x: auto; scrollbar-width: thin; } | |
| .nav-group { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } | |
| .nav-group-secondary { margin-left: 4px; padding-left: 18px; border-left: 1px solid #dfe2e5; } | |
| .app-header nav button { flex: 0 0 auto; border: 0; background: transparent; color: #5d6269; padding: 9px 12px; border-radius: 8px; white-space: nowrap; } | |
| .app-header nav button:hover { background: #f1f2f3; color: #202124; } | |
| .app-header nav button.active { background: #202124; color: #fff; } | |
| .header-tools { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } | |
| .language-toggle { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid #e0e3e6; border-radius: 9px; background: #f7f8f8; } | |
| .language-toggle button { min-width: 32px; border: 0; background: transparent; color: #6b7178; padding: 5px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.2; } | |
| .language-toggle button:hover { background: #eef0f1; color: #202124; } | |
| .language-toggle button.active { background: #fff; color: #202124; box-shadow: 0 1px 2px rgba(0,0,0,.08); } | |
| .queue-state { text-align: right; color: #697078; font-size: 13px; } | |
| .global-error { max-width: 1180px; margin: 16px auto 0; background: #fff1f1; color: #9c2828; border: 1px solid #f0caca; padding: 12px 14px; border-radius: 10px; display: flex; justify-content: space-between; } | |
| .global-error button { border: 0; background: transparent; color: inherit; font-size: 18px; } | |
| .page { max-width: 1180px; margin: 0 auto; padding: 36px 24px 64px; } | |
| .page.narrow { max-width: 880px; } | |
| .page-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; } | |
| .page-title h1 { margin: 0 0 7px; font-size: 28px; letter-spacing: -0.02em; } | |
| .page-title p { margin: 0; color: #6d737a; line-height: 1.5; } | |
| .panel { background: #fff; border: 1px solid #e1e3e6; border-radius: 12px; padding: 20px; } | |
| .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px; } | |
| label { display: flex; flex-direction: column; gap: 7px; } | |
| label > span { font-weight: 600; font-size: 14px; } | |
| small, .hint { color: #767c83; font-size: 12px; line-height: 1.45; } | |
| select, input, textarea { width: 100%; border: 1px solid #cfd3d7; border-radius: 8px; background: #fff; color: #202124; padding: 10px 11px; outline: none; } | |
| select:focus, input:focus, textarea:focus { border-color: #687079; box-shadow: 0 0 0 3px rgba(85, 95, 105, 0.10); } | |
| textarea { resize: vertical; line-height: 1.55; } | |
| .prompt-summary { margin: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; } | |
| .prompt-summary p { margin: 5px 0 0; color: #747a81; font-size: 13px; } | |
| .dropzone { min-height: 150px; margin: 14px 0; border: 1px dashed #aeb4ba; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fafafa; color: #60666d; cursor: pointer; } | |
| .dropzone:hover { border-color: #202124; background: #f7f7f7; } | |
| .dropzone input { display: none; } | |
| .dropzone strong { color: #202124; margin-bottom: 6px; } | |
| .dropzone.compact { min-height: 120px; margin: 12px 0 14px; } | |
| .file-list { margin-bottom: 14px; } | |
| .file-item { display: grid; grid-template-columns: 1fr auto 30px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eceeef; } | |
| .file-item:first-of-type { margin-top: 12px; } | |
| .file-item button { border: 0; background: transparent; font-size: 18px; color: #747a80; } | |
| .block-label { margin-bottom: 14px; } | |
| .row { display: flex; align-items: center; gap: 12px; } | |
| .row.between { justify-content: space-between; } | |
| .actions { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .actions.end { justify-content: flex-end; } | |
| .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; } | |
| .button.primary { background: #202124; color: #fff; } | |
| .button.primary:hover { background: #333538; } | |
| .button.secondary { background: #fff; color: #303337; border-color: #d1d4d8; } | |
| .button.secondary:hover { background: #f4f5f6; } | |
| .button.danger { background: #fff; color: #a03333; border-color: #e2caca; } | |
| .button:disabled { opacity: .45; cursor: default; } | |
| .text-button { border: 0; background: transparent; color: #555c64; padding: 4px 0; } | |
| .text-button.active { color: #111; font-weight: 700; } | |
| .app-footer { margin-top: auto; padding: 18px 24px 28px; display: flex; justify-content: center; } | |
| .app-footer a { display: inline-flex; align-items: center; gap: 8px; color: #4f565e; text-decoration: none; font-size: 13px; font-weight: 700; } | |
| .app-footer a:hover { color: #202124; text-decoration: underline; } | |
| .app-footer svg { width: 18px; height: 18px; flex: 0 0 auto; } | |
| .prompt-editor { padding: 0; overflow: hidden; } | |
| .prompt-meta { padding: 14px 16px; border-bottom: 1px solid #e4e6e8; color: #6b7178; font-size: 13px; } | |
| .prompt-editor textarea { min-height: 620px; border: 0; border-radius: 0; padding: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } | |
| .prompt-editor textarea:focus { box-shadow: none; } | |
| .prompt-editor .hint { margin: 0; padding: 12px 16px; border-top: 1px solid #e4e6e8; } | |
| code { background: #f0f1f2; padding: 2px 5px; border-radius: 4px; } | |
| .compact-select { width: 180px; } | |
| .toolbar { display: grid; grid-template-columns: 1fr 260px auto; gap: 12px; align-items: center; margin-bottom: 14px; } | |
| .toolbar span { color: #747a81; font-size: 13px; white-space: nowrap; } | |
| .rule-list, .result-list { display: flex; flex-direction: column; gap: 8px; } | |
| .rule-card, .result-card { background: #fff; border: 1px solid #e0e3e6; border-radius: 10px; overflow: hidden; } | |
| .rule-card summary, .result-card summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; } | |
| .rule-card summary::-webkit-details-marker, .result-card summary::-webkit-details-marker { display: none; } | |
| .rule-card[open] summary, .result-card[open] summary { border-bottom: 1px solid #e8eaec; } | |
| .rule-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #60666d; white-space: nowrap; } | |
| .rule-title { font-weight: 600; min-width: 0; } | |
| .rule-body, .result-body { padding: 16px; } | |
| .rule-body > p, .requirement { margin: 0 0 14px; line-height: 1.55; } | |
| .meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; color: #656b72; font-size: 13px; margin-bottom: 14px; } | |
| .severity-dot { width: 9px; height: 9px; border-radius: 50%; } | |
| .severity-dot.critical { background: #a92c2c; } | |
| .severity-dot.major { background: #c06a17; } | |
| .severity-dot.minor { background: #4774a6; } | |
| .severity-dot.info { background: #7e858c; } | |
| .example { padding: 10px 12px; border-radius: 8px; margin-top: 8px; font-size: 13px; line-height: 1.5; } | |
| .example.good { background: #f0f8f2; color: #315d3c; } | |
| .example.bad { background: #fff3f1; color: #7d3832; } | |
| .reports-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; max-width: 1320px; } | |
| .jobs-panel { padding: 14px; align-self: start; position: sticky; top: 82px; } | |
| .jobs-panel h2 { margin: 0; font-size: 17px; } | |
| .jobs-list { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; } | |
| .job-row { width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 10px; text-align: left; } | |
| .job-row:hover { background: #f4f5f6; } | |
| .job-row.selected { background: #eceeef; } | |
| .job-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .job-row span { display: block; margin-top: 4px; color: #777d84; font-size: 12px; } | |
| .report-area { min-width: 0; } | |
| .job-state h1 { margin-top: 0; } | |
| progress { width: 100%; height: 8px; margin: 12px 0 20px; } | |
| .inline-error { background: #fff0f0; color: #922d2d; padding: 12px; border-radius: 8px; margin: 12px 0; white-space: pre-wrap; } | |
| .report-title { align-items: center; } | |
| .score-box { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; } | |
| .score-box strong { font-size: 38px; } | |
| .score-box span { color: #747a80; font-size: 13px; } | |
| .status-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; } | |
| .status-card { border: 1px solid #dde0e3; background: #fff; border-radius: 10px; padding: 14px 10px; text-align: left; color: #626970; } | |
| .status-card strong { display: block; color: #202124; font-size: 23px; } | |
| .status-card span { font-size: 12px; } | |
| .status-card.active { border-color: #202124; box-shadow: inset 0 0 0 1px #202124; } | |
| .status-card.violation.active { background: #fff4f2; } | |
| .status-card.pass.active { background: #f1f8f2; } | |
| .status-card.uncertain.active { background: #fff9e8; } | |
| .status-card.not_checked.active, .status-card.not_applicable.active { background: #f3f4f5; } | |
| .report-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 12px; padding: 12px 16px; } | |
| .report-controls span { color: #747a81; font-size: 13px; } | |
| .result-card summary { grid-template-columns: auto auto 1fr; } | |
| .status-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 8px; } | |
| .status-badge.violation { color: #943129; background: #fde9e6; } | |
| .status-badge.pass { color: #35613e; background: #e5f3e8; } | |
| .status-badge.uncertain { color: #785f18; background: #fff2c7; } | |
| .status-badge.not_checked, .status-badge.not_applicable { color: #626970; background: #eceeef; } | |
| .explanation, .fix, .evidence { margin-top: 14px; } | |
| .explanation p, .fix p { margin: 5px 0 0; line-height: 1.55; } | |
| .coverage-line { color: #6d737a; font-size: 13px; } | |
| blockquote { margin: 8px 0; padding: 10px 12px; border-left: 3px solid #c9cdd1; background: #f7f8f8; line-height: 1.5; } | |
| blockquote span { display: block; color: #70767c; font-size: 12px; margin-bottom: 5px; } | |
| .technical-details { margin-top: 14px; } | |
| .technical-details summary { cursor: pointer; font-weight: 600; } | |
| .technical-body { margin-top: 16px; } | |
| .technical-body label { margin-top: 14px; } | |
| .report-actions { margin-top: 14px; } | |
| .empty { text-align: center; color: #777d83; padding: 40px 20px; } | |
| .empty.small { padding: 20px 8px; } | |
| .loading-screen { min-height: 100vh; display: grid; place-items: center; color: #666d73; } | |
| @media (max-width: 900px) { | |
| .app-header { height: auto; min-height: 64px; grid-template-columns: 1fr auto; padding: 12px 16px; } | |
| .app-header nav { grid-column: 1 / -1; order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; } | |
| .header-tools { grid-column: 2; } | |
| .queue-state { display: none; } | |
| .form-grid, .reports-layout { grid-template-columns: 1fr; } | |
| .jobs-panel { position: static; } | |
| .status-grid { grid-template-columns: repeat(2, 1fr); } | |
| .toolbar, .report-controls { grid-template-columns: 1fr; } | |
| .meta-grid { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 560px) { | |
| .page { padding: 24px 14px 48px; } | |
| .page-title { flex-direction: column; } | |
| .prompt-summary { align-items: flex-start; flex-direction: column; } | |
| .status-grid { grid-template-columns: 1fr; } | |
| .app-header nav button { padding: 8px 10px; } | |
| .app-header nav { gap: 10px; } | |
| .nav-group { gap: 4px; } | |
| .nav-group-secondary { margin-left: 2px; padding-left: 12px; } | |
| } | |
| .prompt-tabs { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px; background: #eceeef; border-radius: 10px; } | |
| .prompt-tabs button { border: 0; background: transparent; padding: 8px 13px; border-radius: 7px; color: #626970; } | |
| .prompt-tabs button.active { background: #fff; color: #202124; box-shadow: 0 1px 3px rgba(0,0,0,.08); } | |
| .map-panel { margin-bottom: 14px; padding: 0; overflow: hidden; } | |
| .map-panel > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; cursor: pointer; } | |
| .map-panel > summary::-webkit-details-marker { display: none; } | |
| .map-panel[open] > summary { border-bottom: 1px solid #e6e8ea; } | |
| .map-panel > summary > span:last-child { color: #71777e; font-size: 13px; } | |
| .map-body { padding: 16px 18px 18px; } | |
| .map-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; color: #666d74; font-size: 13px; } | |
| .map-issues { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } | |
| .map-issues > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: 13px; } | |
| .map-issues .warning { background: #fff3e3; color: #77531c; } | |
| .map-issues .info { background: #f2f4f6; color: #59616a; } | |
| .map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } | |
| .map-toolbar select { width: 250px; } | |
| .map-toolbar span { color: #737980; font-size: 13px; } | |
| .map-elements { display: flex; flex-direction: column; gap: 6px; } | |
| .map-element { border: 1px solid #e1e4e7; border-radius: 8px; overflow: hidden; background: #fff; } | |
| .map-element.ambiguous { border-color: #e3c77c; } | |
| .map-element > summary { list-style: none; display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; } | |
| .map-element > summary::-webkit-details-marker { display: none; } | |
| .map-element > summary span { color: #697078; font-size: 12px; } | |
| .map-element > summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .map-element > summary small { white-space: nowrap; } | |
| .map-element > div { padding: 12px; border-top: 1px solid #eceeef; } | |
| .map-element > div p { margin: 0 0 9px; line-height: 1.5; } | |
| .map-relations { margin-top: 14px; } | |
| .map-relations summary { cursor: pointer; font-weight: 600; } | |
| .map-relations ul { margin-bottom: 0; padding-left: 20px; } | |
| .map-relations li { margin: 7px 0; line-height: 1.45; } | |
| @media (max-width: 700px) { | |
| .map-panel > summary { align-items: flex-start; flex-direction: column; } | |
| .map-element > summary { grid-template-columns: 1fr; gap: 4px; } | |
| .map-issues > div { grid-template-columns: 1fr; } | |
| } | |
| .map-edit-row { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 14px; align-items: end; margin: 12px 0; } | |
| .map-edit-row label span { font-size: 12px; color: #686f76; } | |
| .map-edit-row .actions { justify-content: flex-end; } | |
| @media (max-width: 700px) { .map-edit-row { grid-template-columns: 1fr; } .map-edit-row .actions { justify-content: flex-start; } } | |
| /* v3: user-reviewed one-shot structure */ | |
| .structure-review { min-width: 0; } | |
| .review-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; } | |
| .review-intro p { margin: 6px 0 0; color: #666d74; line-height: 1.5; max-width: 720px; } | |
| .review-sections { display: flex; flex-direction: column; gap: 8px; } | |
| .structure-card { padding: 0; overflow: hidden; } | |
| .structure-card.ambiguous { border-color: #d6b963; } | |
| .structure-card > summary { list-style: none; display: grid; grid-template-columns: 170px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 15px; cursor: pointer; } | |
| .structure-card > summary::-webkit-details-marker { display: none; } | |
| .structure-card > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .structure-card > summary small { white-space: nowrap; color: #737980; } | |
| .structure-type { color: #626970; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } | |
| .structure-card-body { border-top: 1px solid #e7e9eb; padding: 15px; } | |
| .structure-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; } | |
| .structure-fields label:nth-child(3), .structure-fields label:nth-child(4) { grid-column: span 1; } | |
| .fragment-preview { margin: 14px 0; } | |
| .fragment-preview > b { display: block; margin-bottom: 6px; } | |
| .review-footer { margin-top: 16px; } | |
| .actions.between { justify-content: space-between; } | |
| .map-stats.panel { margin-bottom: 12px; padding: 13px 16px; } | |
| .map-issues.panel { padding: 12px; } | |
| .api-diagnostics { margin: 12px 0; border: 1px solid #e0c46b; border-radius: 9px; background: #fffaf0; overflow: hidden; } | |
| .api-diagnostics > summary { padding: 11px 13px; cursor: pointer; font-weight: 700; color: #6f5716; } | |
| .api-diagnostics > div { border-top: 1px solid #ecdca9; } | |
| .diagnostic-row { display: grid; gap: 4px; padding: 10px 13px; border-bottom: 1px solid #efe3bb; } | |
| .diagnostic-row:last-child { border-bottom: 0; } | |
| .diagnostic-row span { line-height: 1.4; } | |
| .diagnostic-row small { color: #73693f; } | |
| .readonly-map-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; } | |
| .readonly-map-row span { color: #697078; font-size: 12px; } | |
| .readonly-map-row small { color: #747a80; } | |
| @media (max-width: 760px) { | |
| .review-intro { align-items: flex-start; flex-direction: column; } | |
| .structure-card > summary, .readonly-map-row { grid-template-columns: 1fr; gap: 4px; } | |
| .structure-fields { grid-template-columns: 1fr; } | |
| } | |
| .structure-fields .full-width { grid-column: 1 / -1; } | |
| .matrix-table { overflow-x: auto; margin-top: 10px; } | |
| .matrix-table table { width: 100%; border-collapse: collapse; font-size: 13px; } | |
| .matrix-table th, .matrix-table td { border: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; } | |
| .candidate-context { | |
| display: block; | |
| margin-top: 0.55rem; | |
| color: var(--muted, #5c667a); | |
| font-size: 0.85rem; | |
| line-height: 1.45; | |
| } | |
| .developer-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } | |
| .developer-toggle input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; } | |
| .developer-toggle span { display: grid; gap: 4px; } | |
| .developer-toggle small { line-height: 1.45; } | |
| .report-health { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 14px; border-radius: 10px; border: 1px solid #d7dce1; background: #f7f8f9; } | |
| .report-health strong { min-width: 170px; } | |
| .report-health span { color: #525a61; } | |
| .report-health.ready { background: #eef8f0; border-color: #b9d8c0; } | |
| .report-health.review_required { background: #fff8e8; border-color: #e2c980; } | |
| .report-health.technical_incomplete { background: #fff0f0; border-color: #e1b4b4; } | |
| /* quality-4: report readability and user-facing polish */ | |
| .result-card summary { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; } | |
| .result-card summary .rule-title { white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.35; } | |
| .result-card summary .rule-id { align-self: center; } | |
| .evidence blockquote { overflow: visible; max-height: none; } | |
| .evidence-quote, .candidate-context { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; } | |
| .progress-message { margin: -3px 0 10px; color: #5f666d; line-height: 1.45; } | |
| .advice-actions { margin-top: 14px; } | |
| .related-advice { margin-top: 9px; padding: 12px 14px; border-left: 3px solid #7c6b3d; background: #faf7ee; border-radius: 8px; } | |
| .related-advice strong { display: block; margin-bottom: 5px; } | |
| .related-advice p { margin: 0 0 7px; line-height: 1.5; } | |
| .related-advice a { color: #4b5967; font-size: 13px; } | |
| .normcontrol-upload { margin-bottom: 20px; } | |
| .normcontrol-meta { display: flex; align-items: center; gap: 10px; color: #6c737a; font-size: 13px; flex-wrap: wrap; } | |
| .normcontrol-server-status { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border: 1px solid #bad8c0; border-radius: 8px; background: #eef8f0; color: #35613e; font-size: 13px; } | |
| .normcontrol-server-status span { color: #53625a; overflow-wrap: anywhere; } | |
| .normcontrol-list { display: flex; flex-direction: column; gap: 10px; } | |
| .normcontrol-list-title { margin: 4px 0 0; } | |
| .normcontrol-list-title h2 { margin: 0; font-size: 18px; } | |
| .normcontrol-list-title span { color: #747b82; } | |
| .normcontrol-card { display: grid; gap: 10px; } | |
| .normcontrol-card-head { align-items: flex-start; } | |
| .normcontrol-card h3 { margin: 0 0 4px; font-size: 17px; overflow-wrap: anywhere; } | |
| .normcontrol-card p { margin: 0; } | |
| .normcontrol-card-head p { color: #697078; font-size: 13px; } | |
| .retry-warning { padding: 9px 11px; border-left: 3px solid #b37b2a; background: #fff7e8; color: #6f4c16; border-radius: 8px; font-size: 13px; line-height: 1.45; } | |
| .normcontrol-status { padding: 4px 8px; border-radius: 999px; background: #eceeef; color: #5d646b; font-size: 11px; font-weight: 700; white-space: nowrap; } | |
| .normcontrol-status.running, .normcontrol-status.submitting, .normcontrol-status.reporting, .normcontrol-status.downloading, .normcontrol-status.queued_report { background: #eef4fb; color: #345d83; } | |
| .normcontrol-status.completed { background: #e5f3e8; color: #35613e; } | |
| .normcontrol-status.failed { background: #fde9e6; color: #943129; } | |
| .normcontrol-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #666d74; font-size: 13px; } | |
| .normcontrol-facts code { overflow-wrap: anywhere; } | |
| .normcontrol-attempts { border: 1px solid #e4e7ea; border-radius: 8px; overflow: hidden; } | |
| .normcontrol-attempts summary { cursor: pointer; padding: 10px 12px; font-weight: 700; } | |
| .attempt-row { display: grid; gap: 4px; padding: 10px 12px; border-top: 1px solid #edf0f2; font-size: 12px; } | |
| .attempt-row.failed, .attempt-row.timed_out, .attempt-row.remote_failed { background: #fffafa; } | |
| .attempt-row span, .attempt-row small { color: #697078; overflow-wrap: anywhere; } | |
| .attempt-row ul { margin: 4px 0 0; padding-left: 18px; color: #78302a; } | |
| .attempt-row li { margin: 3px 0; line-height: 1.4; } | |
| .attempt-row pre { margin: 4px 0 0; padding: 8px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 6px; background: #f6f7f8; color: #78302a; } | |
| .normcontrol-findings { border: 1px solid #e4e7ea; border-radius: 8px; overflow: hidden; } | |
| .normcontrol-findings summary { cursor: pointer; padding: 10px 12px; font-weight: 700; } | |
| .normcontrol-findings ul { margin: 0; padding: 0 14px 12px 30px; } | |
| .normcontrol-findings li { margin: 6px 0; line-height: 1.45; } | |
| @media (max-width: 560px) { | |
| .normcontrol-card-head { flex-direction: column; } | |
| } | |
| /* Literature review — user-facing page */ | |
| .polished-literature-page { max-width: 1120px; } | |
| .literature-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 18px; } | |
| .literature-hero h1 { margin: 5px 0 8px; font-size: 32px; letter-spacing: -0.035em; } | |
| .literature-hero p { max-width: 720px; margin: 0; color: #697078; font-size: 15px; line-height: 1.55; } | |
| .literature-eyebrow, .literature-result-kicker { display: inline-block; color: #777e86; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } | |
| .literature-start-card { padding: 20px; display: grid; grid-template-columns: minmax(230px, .72fr) minmax(320px, 1.25fr) auto; gap: 14px; align-items: end; } | |
| .literature-model-field { min-width: 0; display: grid; gap: 6px; } | |
| .literature-model-field > span { font-size: 12px; font-weight: 700; color: #5d646b; } | |
| .literature-model-field select { width: 100%; } | |
| .literature-model-field small { color: #858b91; line-height: 1.35; } | |
| .literature-file-picker { min-width: 0; min-height: 88px; border: 1px dashed #bdc3c9; border-radius: 12px; background: #fafbfb; padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-align: left; color: inherit; } | |
| .literature-file-picker:hover:not(:disabled) { border-color: #777f87; background: #f7f8f8; } | |
| .literature-file-picker.has-file { border-style: solid; background: #fff; } | |
| .literature-file-picker input { display: none; } | |
| .literature-file-icon { width: 46px; height: 54px; border: 1px solid #d7dade; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: 0 0 auto; color: #8b3b3b; font-size: 11px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 1px 2px rgba(20, 24, 28, .04); } | |
| .literature-file-copy { min-width: 0; display: grid; gap: 4px; flex: 1; } | |
| .literature-file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } | |
| .literature-file-copy small { color: #7a8087; } | |
| .literature-start-actions { display: flex; align-items: center; gap: 8px; } | |
| .literature-start-button { min-width: 160px; min-height: 44px; } | |
| .literature-running, .literature-error { grid-column: 1 / -1; } | |
| .literature-running { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; background: #f5f6f7; } | |
| .literature-running > div { display: grid; gap: 2px; } | |
| .literature-running small { color: #767c83; } | |
| .literature-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d4d7da; border-top-color: #34383c; animation: literature-spin .8s linear infinite; } | |
| @keyframes literature-spin { to { transform: rotate(360deg); } } | |
| .literature-queue-panel { margin-top: 14px; padding: 0; overflow: hidden; } | |
| .literature-queue-head { min-height: 56px; padding: 12px 16px; display: flex; align-items: center; border-bottom: 1px solid #eceef0; } | |
| .literature-queue-head > div { display: grid; gap: 3px; } | |
| .literature-queue-head strong { font-size: 14px; } | |
| .literature-queue-head span { color: #7a8087; font-size: 12px; } | |
| .literature-job-list { display: flex; flex-direction: column; } | |
| .literature-job-row { min-height: 68px; display: flex; align-items: stretch; border-bottom: 1px solid #f0f1f2; background: #fff; } | |
| .literature-job-row:last-child { border-bottom: 0; } | |
| .literature-job-row:hover { background: #fafbfb; } | |
| .literature-job-row.selected { background: #f7f8f9; box-shadow: inset 3px 0 0 #34383c; } | |
| .literature-job-main { min-width: 0; flex: 1; border: 0; background: transparent; color: inherit; padding: 10px 12px; display: flex; align-items: center; gap: 10px; text-align: left; } | |
| .literature-job-index { width: 28px; height: 28px; border-radius: 8px; background: #f0f2f3; display: grid; place-items: center; flex: 0 0 auto; color: #646b72; font-size: 12px; font-weight: 750; } | |
| .literature-job-copy { min-width: 0; flex: 1; display: grid; gap: 3px; } | |
| .literature-job-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } | |
| .literature-job-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7a8087; font-size: 12px; } | |
| .literature-progress-track { width: min(360px, 100%); height: 3px; border-radius: 999px; background: #e6e9ec; overflow: hidden; margin-top: 4px; } | |
| .literature-progress-track > span { display: block; height: 100%; border-radius: inherit; background: #4f5963; transition: width .25s ease; } | |
| .literature-queue-status { flex: 0 0 auto; min-width: 88px; padding: 5px 8px; border-radius: 999px; text-align: center; background: #eef0f2; color: #666d74; font-size: 11px; font-weight: 750; } | |
| .literature-queue-status.running, .literature-queue-status.cancelling { background: #edf2f7; color: #466078; } | |
| .literature-queue-status.done { background: #eaf4eb; color: #3d6745; } | |
| .literature-queue-status.failed { background: #fbe8e6; color: #8f342f; } | |
| .literature-queue-status.cancelled { background: #f0f1f2; color: #747a80; } | |
| .literature-job-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 9px 12px 9px 4px; } | |
| .literature-job-actions .text-button { white-space: nowrap; } | |
| .literature-job-remove { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #81878d; font-size: 18px; } | |
| .literature-job-remove:hover { background: #eceeef; color: #2b2e31; } | |
| .literature-selected-error { margin-top: 14px; } | |
| .literature-result-head { margin: 32px 0 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } | |
| .literature-result-head h2 { margin: 5px 0 0; max-width: 760px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; letter-spacing: -0.02em; } | |
| .literature-summary-simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } | |
| .literature-summary-card { min-height: 92px; background: #fff; border: 1px solid #e1e3e6; border-radius: 12px; padding: 17px; display: flex; flex-direction: column; justify-content: center; gap: 7px; } | |
| .literature-summary-card strong { font-size: 28px; line-height: 1; letter-spacing: -0.03em; } | |
| .literature-summary-card span { color: #71777e; font-size: 13px; } | |
| .literature-summary-card.ok { background: #f4f8f4; border-color: #d9e5da; } | |
| .literature-summary-card.attention { background: #fff9ed; border-color: #eadbb8; } | |
| .literature-soft-notice { margin: 0 0 14px; border: 1px solid #e7d8b5; background: #fffaf0; color: #675a3c; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.45; } | |
| .literature-result-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 12px; } | |
| .literature-segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #e0e3e6; border-radius: 10px; background: #fff; } | |
| .literature-segmented button { border: 0; border-radius: 7px; background: transparent; color: #656c73; padding: 8px 11px; font-size: 13px; } | |
| .literature-segmented button:hover { background: #f4f5f6; color: #24272a; } | |
| .literature-segmented button.active { background: #202124; color: #fff; } | |
| .literature-review-list { display: flex; flex-direction: column; gap: 10px; } | |
| .literature-reference-card { padding: 0; overflow: hidden; } | |
| .literature-reference-top { min-height: 52px; padding: 11px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eceef0; } | |
| .literature-reference-number { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #f0f2f3; color: #5e656c; font-size: 12px; font-weight: 800; } | |
| .literature-user-status { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; } | |
| .literature-user-status.ok { color: #3d6745; background: #eaf4eb; } | |
| .literature-user-status.minor { color: #746329; background: #f5efd6; } | |
| .literature-user-status.mismatch { color: #85452e; background: #f8e8df; } | |
| .literature-user-status.review { color: #715a1d; background: #fff2c8; } | |
| .literature-user-status.danger { color: #8f342f; background: #fbe8e6; } | |
| .literature-user-status.neutral { color: #646b72; background: #eceeef; } | |
| .literature-source-link { margin-left: auto; color: #4e6478; text-decoration: none; font-size: 12px; font-weight: 650; } | |
| .literature-source-link:hover { text-decoration: underline; } | |
| .literature-reference-body { padding: 15px 16px 17px; display: grid; gap: 13px; } | |
| .literature-reference-body p { margin: 4px 0 0; color: #32363a; font-size: 13px; line-height: 1.52; } | |
| .literature-field-label { color: #858b91; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } | |
| .literature-found-block { padding-top: 12px; border-top: 1px solid #f0f1f2; } | |
| .literature-note { border-radius: 9px; background: #f7f8f9; padding: 10px 12px; } | |
| .literature-note > span { color: #6d747b; font-size: 11px; font-weight: 750; } | |
| .literature-note p { margin-top: 3px; } | |
| .literature-empty-state { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #70777e; text-align: center; } | |
| .literature-empty-state strong { color: #2d3033; } | |
| @media (max-width: 920px) { | |
| .literature-start-card { grid-template-columns: 1fr; align-items: stretch; } | |
| .literature-start-actions { justify-content: flex-end; } | |
| .literature-running, .literature-error { grid-column: auto; } | |
| } | |
| @media (max-width: 760px) { | |
| .literature-start-actions { width: 100%; } | |
| .literature-start-actions .button { flex: 1; } | |
| .literature-job-row { align-items: center; } | |
| .literature-job-actions { padding-left: 0; } | |
| .literature-queue-status { min-width: 0; } | |
| .literature-job-copy small { white-space: normal; } | |
| .literature-summary-simple { grid-template-columns: 1fr; } | |
| .literature-result-head { align-items: flex-start; flex-direction: column; } | |
| .literature-result-head h2 { white-space: normal; } | |
| .literature-segmented { width: 100%; overflow-x: auto; } | |
| .literature-segmented button { flex: 0 0 auto; } | |
| } | |
| .literature-source-type { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: #f3f4f5; color: #697078; font-size: 11px; font-weight: 650; } | |
| /* Reproducibility / OSA paper-analysis viewer */ | |
| .reproducibility-page { max-width: 1180px; } | |
| .repro-hero { margin-bottom: 18px; } | |
| .repro-hero h1, .repro-print-heading h1 { margin: 4px 0 7px; font-size: 32px; letter-spacing: -.035em; } | |
| .repro-hero p, .repro-print-heading p { margin: 0; max-width: 760px; color: #697078; line-height: 1.5; } | |
| .repro-eyebrow, .repro-section-kicker { color: #7b8188; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } | |
| .repro-input-card { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; align-items: end; margin-bottom: 18px; } | |
| .repro-file-field { min-width: 0; display: grid; gap: 7px; } | |
| .repro-file-field > span { font-size: 14px; font-weight: 600; } | |
| .repro-file-button { min-height: 72px; width: 100%; border: 1px dashed #c8cdd2; border-radius: 10px; background: #fafbfb; display: flex; align-items: center; gap: 11px; padding: 11px; text-align: left; color: inherit; } | |
| .repro-file-button:hover { background: #f6f7f8; border-color: #8b9299; } | |
| .repro-file-button.loaded { border-style: solid; background: #f6faf6; border-color: #c9ddcc; } | |
| .repro-file-button > span:last-child { display: grid; gap: 3px; min-width: 0; } | |
| .repro-file-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .repro-file-button small { color: #7b8188; } | |
| .repro-file-icon { width: 42px; height: 48px; flex: 0 0 auto; border: 1px solid #d8dcdf; border-radius: 7px; background: #fff; display: grid; place-items: center; color: #8d3e39; font-size: 10px; font-weight: 800; } | |
| .repro-file-icon.json { color: #52697d; } | |
| .repro-full { grid-column: 1 / -1; } | |
| .repro-empty { min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; color: #737980; text-align: center; } | |
| .repro-empty strong { color: #292c2f; font-size: 17px; } | |
| .repro-print-heading { display: none; margin-bottom: 24px; } | |
| .repro-print-meta { margin-top: 14px; display: grid; gap: 4px; color: #646b72; font-size: 12px; } | |
| .repro-export-card { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center; margin-bottom: 28px; } | |
| .repro-export-card > div:first-child { display: grid; gap: 4px; } | |
| .repro-export-card > div:first-child > strong { font-size: 16px; } | |
| .repro-export-card small { color: #7b8188; } | |
| .repro-print-hint { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #eceeef; color: #858b91; font-size: 12px; } | |
| .repro-section-title { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin: 0 0 11px; } | |
| .repro-section-title h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.02em; } | |
| .repro-section-title > span { color: #858b91; font-size: 13px; } | |
| .repro-stats-section { margin-bottom: 28px; } | |
| .repro-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; } | |
| .repro-stat { min-height: 90px; border: 1px solid #e0e3e6; border-radius: 11px; background: #fff; padding: 15px; display: grid; align-content: center; gap: 6px; } | |
| .repro-stat strong { font-size: 27px; line-height: 1; } | |
| .repro-stat span { color: #70777e; font-size: 12px; } | |
| .repro-stat.confirmed { background: #f2f8f3; border-color: #d3e4d6; } | |
| .repro-stat.partial { background: #fff9eb; border-color: #eadfbe; } | |
| .repro-stat.rejected { background: #fff2f0; border-color: #ebd0cc; } | |
| .repro-stat.uncertain { background: #f5f6f7; } | |
| .repro-claims-list { display: flex; flex-direction: column; gap: 10px; } | |
| .repro-claim-card { padding: 0; overflow: hidden; break-inside: avoid; } | |
| .repro-claim-top { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid #eceef0; } | |
| .repro-verdict { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; } | |
| .repro-verdict.confirmed { color: #35613e; background: #e5f3e8; } | |
| .repro-verdict.partial { color: #785f18; background: #fff2c7; } | |
| .repro-verdict.rejected { color: #943129; background: #fde9e6; } | |
| .repro-verdict.uncertain { color: #626970; background: #eceeef; } | |
| .repro-claim-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #868c92; font-size: 11px; } | |
| .repro-claim-card h3 { margin: 0; padding: 15px 16px 7px; font-size: 16px; line-height: 1.45; } | |
| .repro-explanation, .repro-evidence { padding: 8px 16px 15px; } | |
| .repro-explanation > strong, .repro-evidence > strong { display: block; margin-bottom: 6px; font-size: 13px; } | |
| .repro-explanation p { margin: 0; color: #4d5359; line-height: 1.55; } | |
| .repro-evidence-item { border-left: 3px solid #c9ced3; background: #f7f8f8; padding: 10px 12px; margin-top: 7px; } | |
| .repro-evidence-item > div { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } | |
| .repro-evidence-item a { color: #4e6478; overflow-wrap: anywhere; } | |
| .repro-evidence-item blockquote { margin: 8px 0 0; padding: 0; border: 0; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; } | |
| .repro-evidence-item p { margin: 7px 0 0; color: #626970; } | |
| .repro-raw { margin: 0 16px 15px; } | |
| .repro-raw summary { cursor: pointer; color: #747b82; font-size: 12px; } | |
| .repro-raw pre { max-height: 260px; overflow: auto; white-space: pre-wrap; background: #f5f6f7; border-radius: 8px; padding: 10px; font-size: 11px; } | |
| @media (max-width: 900px) { | |
| .repro-input-card { grid-template-columns: 1fr; } | |
| .repro-stats { grid-template-columns: repeat(2, 1fr); } | |
| .repro-export-card { grid-template-columns: 1fr; } | |
| } | |
| @media print { | |
| :root, body { background: #fff; } | |
| .app-header, .global-error, .repro-no-print { display: none ; } | |
| .app-shell { min-height: 0; } | |
| .reproducibility-page { max-width: none; padding: 0; margin: 0; } | |
| .repro-print-heading { display: block; } | |
| .repro-stats-section { margin-bottom: 22px; } | |
| .repro-stat, .repro-claim-card { box-shadow: none; } | |
| .repro-claims-list { gap: 8px; } | |
| .repro-claim-card { border-color: #d9dde1; } | |
| a { color: #202124 ; text-decoration: none; } | |
| @page { size: A4; margin: 14mm; } | |
| } | |
| /* Reproducibility: OSA paper_analysis.json v1.0 */ | |
| .repro-models { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; color: #6d747b; font-size: 12px; } | |
| .repro-claim-meta { display: flex; flex-wrap: wrap; gap: 7px; padding: 5px 16px 10px; } | |
| .repro-claim-meta > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3e6e8; border-radius: 999px; background: #fafbfb; padding: 4px 8px; color: #626970; font-size: 11px; } | |
| .repro-claim-meta b { color: #34383c; font-weight: 700; } | |
| .repro-source-text { padding: 8px 16px 10px; } | |
| .repro-source-text > strong { display: block; margin-bottom: 6px; font-size: 13px; } | |
| .repro-source-text blockquote { margin: 0; border-left: 3px solid #d9dde0; padding: 9px 12px; background: #fafafa; color: #62676c; font-size: 13px; line-height: 1.5; } | |
| .repro-evidence-item > code { display: inline-block; margin-bottom: 5px; padding: 4px 7px; border-radius: 6px; background: #eef1f2; color: #30363b; font-size: 12px; } | |
| @media print { | |
| .repro-models { color: #555; } | |
| .repro-claim-meta > span { background: #fff; } | |
| .repro-source-text blockquote { background: #fff; } | |
| } | |
| /* Reproducibility: clickable statistics filters */ | |
| .repro-print-only { display: none; } | |
| .repro-stat-button { | |
| width: 100%; | |
| appearance: none; | |
| font: inherit; | |
| color: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; | |
| } | |
| .repro-stat-button:hover { | |
| transform: translateY(-1px); | |
| border-color: #c7ccd1; | |
| box-shadow: 0 4px 14px rgba(26, 31, 36, .07); | |
| } | |
| .repro-stat-button:focus-visible { | |
| outline: 2px solid #5b7083; | |
| outline-offset: 2px; | |
| } | |
| .repro-stat-button.active { | |
| border-color: #7f8d99; | |
| box-shadow: 0 0 0 2px rgba(91, 112, 131, .12); | |
| } | |
| .repro-stat-button.confirmed.active { border-color: #86aa8e; } | |
| .repro-stat-button.rejected.active { border-color: #c99790; } | |
| .repro-stat-button.uncertain.active { border-color: #a5adb4; } | |
| .repro-filter-note { | |
| margin-bottom: 10px; | |
| padding: 15px 16px; | |
| display: grid; | |
| gap: 5px; | |
| background: #fafbfb; | |
| } | |
| .repro-filter-note strong { font-size: 14px; } | |
| .repro-filter-note span { color: #697078; font-size: 13px; line-height: 1.5; } | |
| @media print { | |
| .repro-print-only { display: grid ; } | |
| } | |
| /* Reproducibility: primary run action */ | |
| .repro-run-row { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-top: 2px; | |
| } | |
| .repro-run-button { | |
| min-width: 150px; | |
| } | |
| /* Reproducibility: live OSA runner */ | |
| .repro-run-row { gap: 8px; align-items: center; flex-wrap: wrap; } | |
| .repro-service-note, | |
| .repro-run-status { | |
| border: 1px solid #dde1e4; | |
| border-radius: 10px; | |
| background: #fafbfb; | |
| padding: 13px 14px; | |
| } | |
| .repro-service-note { display: grid; gap: 4px; color: #5d646b; } | |
| .repro-service-note strong { color: #34383c; } | |
| .repro-run-status { display: grid; gap: 10px; } | |
| .repro-run-status.completed { border-color: #c9ddcc; background: #f6faf6; } | |
| .repro-run-status.failed { border-color: #ebd0cc; background: #fff7f5; } | |
| .repro-run-status-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; } | |
| .repro-run-status-head > div { display: grid; gap: 3px; min-width: 0; } | |
| .repro-run-status-head strong { font-size: 14px; } | |
| .repro-run-status-head span { color: #666d74; font-size: 13px; } | |
| .repro-run-status-head > b { font-size: 14px; font-variant-numeric: tabular-nums; } | |
| .repro-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e7eaec; } | |
| .repro-progress-track > span { display: block; height: 100%; border-radius: inherit; background: #657b8e; transition: width .25s ease; } | |
| .repro-run-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; color: #737a81; font-size: 12px; } | |
| .repro-run-meta span:last-child { overflow-wrap: anywhere; } | |
| .repro-run-actions { display: flex; justify-content: flex-end; } | |
| /* Reproducibility diagnostics and live OSA log */ | |
| .repro-preflight { | |
| border: 1px solid #dde1e4; | |
| border-radius: 10px; | |
| background: #fafbfb; | |
| padding: 14px; | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .repro-preflight-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } | |
| .repro-preflight-head strong { font-size: 14px; } | |
| .repro-preflight-head span { color: #737a81; font-size: 12px; } | |
| .repro-preflight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; } | |
| .repro-check { display: flex; gap: 9px; padding: 9px 10px; border: 1px solid #e2e5e7; border-radius: 8px; background: white; } | |
| .repro-check > b { width: 20px; flex: 0 0 20px; text-align: center; } | |
| .repro-check.ok > b { color: #41734c; } | |
| .repro-check.bad > b { color: #a74639; } | |
| .repro-check.warn > b { color: #947020; } | |
| .repro-check > div { min-width: 0; display: grid; gap: 2px; } | |
| .repro-check strong { font-size: 12px; } | |
| .repro-check span { color: #697078; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; } | |
| .repro-preflight-warnings { display: grid; gap: 5px; color: #775d21; font-size: 12px; line-height: 1.4; } | |
| .repro-live-log { border-top: 1px solid #e1e4e6; padding-top: 9px; } | |
| .repro-live-log summary { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; user-select: none; } | |
| .repro-live-log summary small { color: #7b8288; font-size: 11px; } | |
| .repro-live-log pre { | |
| margin: 10px 0 7px; | |
| max-height: 320px; | |
| overflow: auto; | |
| padding: 11px 12px; | |
| border-radius: 8px; | |
| background: #17191b; | |
| color: #e8eaec; | |
| font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| .repro-log-download { display: inline-block; font-size: 12px; } | |
| /* Reproducibility: minimal OSA.Edu-native layout */ | |
| .repro-main-actions { margin: 14px 0 18px; } | |
| .repro-job-state { margin-bottom: 14px; } | |
| .repro-technical-details { margin-bottom: 30px; } | |
| .repro-jobs-list { margin-bottom: 16px; } | |
| .repro-diagnostics-actions { margin: 16px 0; } | |
| .repro-simple-diagnostics { margin: 12px 0 16px; color: #656b72; font-size: 13px; } | |
| .repro-simple-diagnostics p { margin: 0 0 8px; } | |
| .repro-simple-diagnostics ul { margin: 0; padding-left: 20px; } | |
| .repro-simple-diagnostics li { margin: 6px 0; line-height: 1.45; } | |
| .repro-artifacts-simple { margin: 14px 0; } | |
| .repro-result-title { margin-top: 30px; } | |
| .repro-result-controls { grid-template-columns: auto 1fr; } | |
| .repro-claim-raw { margin-top: 14px; } | |
| .repro-claim-raw pre { margin: 0; max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } | |
| @media (max-width: 700px) { | |
| .repro-result-controls { grid-template-columns: 1fr; } | |
| } | |
| @media print { | |
| .reproducibility-page details.result-card > .result-body { display: block ; } | |
| .reproducibility-page .result-card { break-inside: avoid; } | |
| /* User PDF: keep verdict/rationale/evidence, omit source claim text and raw debug JSON. */ | |
| .reproducibility-page .repro-pdf-omit { display: none ; } | |
| } | |
| /* Repository quality: compact, responsive, OSA.Edu-native layout */ | |
| .repository-quality-page { max-width: 900px; } | |
| .rq-hero { margin-bottom: 18px; } | |
| .rq-hero h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.02em; } | |
| .rq-hero p { max-width: 700px; margin: 0; color: #70767d; line-height: 1.5; } | |
| .rq-inline-message { overflow-wrap: anywhere; } | |
| .rq-launch-card { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: end; | |
| gap: 16px; | |
| margin-bottom: 12px; | |
| padding: 18px; | |
| } | |
| .rq-repository-field { min-width: 0; } | |
| .rq-repository-field input { min-width: 0; } | |
| .rq-launch-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 176px; } | |
| .rq-launch-actions .button { width: 100%; white-space: nowrap; } | |
| .rq-preflight-button { align-self: center; font-size: 12px; color: #6e747b; } | |
| .rq-preflight-button:disabled { opacity: .45; cursor: default; } | |
| .rq-preflight { margin: 12px 0; padding: 0; overflow: hidden; } | |
| .rq-preflight > summary { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| min-width: 0; | |
| padding: 12px 15px; | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| .rq-preflight > summary::-webkit-details-marker { display: none; } | |
| .rq-preflight > summary span { min-width: 0; color: #777d84; font-size: 12px; overflow-wrap: anywhere; text-align: right; } | |
| .rq-preflight[open] > summary { border-bottom: 1px solid #eceeef; } | |
| .rq-preflight-list { display: grid; } | |
| .rq-preflight-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 15px; border-bottom: 1px solid #f0f1f2; } | |
| .rq-preflight-item:last-child { border-bottom: 0; } | |
| .rq-preflight-item > b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; } | |
| .rq-preflight-item.ok > b { background: #e8f3ea; color: #35613e; } | |
| .rq-preflight-item.bad > b { background: #fde9e6; color: #943129; } | |
| .rq-preflight-item.warn > b { background: #fff2c7; color: #785f18; } | |
| .rq-preflight-item div { min-width: 0; display: grid; gap: 2px; } | |
| .rq-preflight-item span { color: #747a81; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } | |
| .rq-job-state { margin: 12px 0 20px; padding: 15px 17px; } | |
| .rq-job-copy { min-width: 0; } | |
| .rq-job-copy h2 { margin: 0 0 4px; font-size: 16px; overflow-wrap: anywhere; } | |
| .rq-job-copy p { margin: 0; font-size: 13px; } | |
| .rq-job-copy > span { display: block; margin-top: 5px; color: #747a81; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } | |
| .rq-job-state progress { margin: 11px 0 7px; } | |
| .rq-job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 10px; } | |
| .rq-result-summary { | |
| display: grid; | |
| grid-template-columns: 180px minmax(0, 1fr); | |
| gap: 22px; | |
| align-items: center; | |
| margin: 20px 0 12px; | |
| padding: 18px; | |
| overflow: hidden; | |
| } | |
| .rq-result-main { min-width: 0; padding-right: 20px; border-right: 1px solid #eceeef; } | |
| .rq-result-kicker { display: block; color: #6c737a; font-size: 12px; overflow-wrap: anywhere; } | |
| .rq-score-line { display: flex; align-items: baseline; margin-top: 4px; } | |
| .rq-score-line strong { font-size: 46px; line-height: 1; letter-spacing: -.045em; } | |
| .rq-score-line span { margin-left: 4px; color: #737a81; font-size: 17px; } | |
| .rq-score-caption { display: block; margin-top: 4px; color: #737a81; font-size: 12px; } | |
| .rq-result-meta { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 22px; } | |
| .rq-result-meta div { min-width: 0; display: grid; gap: 3px; } | |
| .rq-result-meta span { color: #858b91; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } | |
| .rq-result-meta strong { min-width: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } | |
| .rq-warning { display: grid; gap: 4px; margin: 12px 0 20px; padding: 13px 15px; background: #fff9e8; border-color: #eadcae; } | |
| .rq-warning span { color: #6d6250; font-size: 13px; line-height: 1.45; } | |
| .rq-criteria-section { margin: 24px 0 26px; } | |
| .rq-section-heading { margin: 0 0 10px; } | |
| .rq-section-heading > span { color: #858b91; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } | |
| .rq-section-heading h2 { margin: 3px 0 0; font-size: 18px; } | |
| .rq-section-heading p { margin: 4px 0 0; color: #7a8087; font-size: 12px; line-height: 1.45; } | |
| .rq-section-heading-inline { display: flex; align-items: end; justify-content: space-between; gap: 18px; } | |
| .rq-json-link { flex: 0 0 auto; padding: 2px 0; font-size: 12px; text-decoration: none; } | |
| .rq-check-list { display: block; padding: 0; overflow: hidden; } | |
| .rq-check-card { min-width: 0; display: grid; gap: 8px; padding: 15px 17px; border-bottom: 1px solid #eceeef; } | |
| .rq-check-card:last-child { border-bottom: 0; } | |
| .rq-check-card.fail { box-shadow: inset 3px 0 0 #d9897f; } | |
| .rq-check-card.uncertain { box-shadow: inset 3px 0 0 #d7bb59; } | |
| .rq-check-head { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } | |
| .rq-check-heading { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } | |
| .rq-check-heading h3 { min-width: 0; margin: 0; font-size: 15px; overflow-wrap: anywhere; } | |
| .rq-points { white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; } | |
| .rq-check-description { margin: 0; color: #747a81; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; } | |
| .rq-check-status { min-width: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.48; } | |
| .rq-check-status > span { color: #858b91; } | |
| .rq-check-status p { min-width: 0; margin: 0; overflow-wrap: anywhere; } | |
| .rq-check-details { margin: 0; color: #666d74; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } | |
| .rq-recommendation { min-width: 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; padding: 9px 11px; border-radius: 8px; background: #f6f7f8; font-size: 12px; line-height: 1.5; } | |
| .rq-check-card.fail .rq-recommendation { background: #fff5f3; } | |
| .rq-check-card.uncertain .rq-recommendation { background: #fff9e8; } | |
| .rq-recommendation span { min-width: 0; overflow-wrap: anywhere; } | |
| .rq-raw-details { min-width: 0; margin-top: 1px; font-size: 11px; } | |
| .rq-raw-details summary { width: fit-content; cursor: pointer; color: #858b91; } | |
| .rq-raw-details pre { max-width: 100%; max-height: 240px; overflow: auto; margin: 9px 0 0; padding: 10px; border-radius: 8px; background: #f7f8f8; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } | |
| .rq-info-section { margin-bottom: 22px; } | |
| .rq-info-list { display: block; padding: 0; overflow: hidden; } | |
| .rq-info-card { min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 3px 14px; padding: 12px 15px; border-bottom: 1px solid #eceeef; } | |
| .rq-info-card:last-child { border-bottom: 0; } | |
| .rq-info-card strong { grid-row: 1 / span 2; font-size: 13px; } | |
| .rq-info-card p { min-width: 0; margin: 0; color: #50565c; font-size: 13px; overflow-wrap: anywhere; } | |
| .rq-info-card span { min-width: 0; color: #777d84; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; } | |
| .rq-technical { margin-top: 16px; padding: 0; overflow: hidden; } | |
| .rq-technical > summary { padding: 13px 15px; cursor: pointer; font-size: 13px; font-weight: 650; list-style: none; } | |
| .rq-technical > summary::-webkit-details-marker { display: none; } | |
| .rq-technical[open] > summary { border-bottom: 1px solid #eceeef; } | |
| .rq-technical-body { min-width: 0; display: grid; gap: 14px; padding: 14px 15px 16px; } | |
| .rq-history-list { margin-top: 0; } | |
| .rq-history-list .job-row { min-width: 0; } | |
| .rq-history-list .job-row strong, .rq-history-list .job-row span { overflow-wrap: anywhere; } | |
| .rq-log-field { min-width: 0; } | |
| .rq-log-field textarea { min-height: 170px; max-width: 100%; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } | |
| .rq-log-download { justify-self: start; } | |
| @media (max-width: 1100px) { | |
| .app-header { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 14px; padding: 0 18px; } | |
| .app-header nav { justify-content: flex-start; } | |
| .app-header nav button { padding: 8px 10px; } | |
| .queue-state { display: none; } | |
| } | |
| @media (max-width: 760px) { | |
| .rq-launch-card { grid-template-columns: 1fr; align-items: stretch; } | |
| .rq-launch-actions { min-width: 0; flex-direction: row; align-items: center; } | |
| .rq-launch-actions .button { width: auto; } | |
| .rq-result-summary { grid-template-columns: 1fr; gap: 14px; } | |
| .rq-result-main { padding-right: 0; padding-bottom: 13px; border-right: 0; border-bottom: 1px solid #eceeef; } | |
| .rq-result-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| } | |
| @media (max-width: 560px) { | |
| .language-toggle button { min-width: 30px; padding: 5px 6px; } | |
| .rq-launch-actions { flex-direction: column; align-items: stretch; } | |
| .rq-launch-actions .button { width: 100%; } | |
| .rq-preflight > summary { align-items: flex-start; flex-direction: column; } | |
| .rq-preflight > summary span { text-align: left; } | |
| .rq-result-meta { grid-template-columns: 1fr; } | |
| .rq-section-heading-inline { align-items: flex-start; flex-direction: column; gap: 7px; } | |
| .rq-check-status, .rq-recommendation, .rq-info-card { grid-template-columns: 1fr; } | |
| .rq-info-card strong { grid-row: auto; } | |
| .rq-check-head { align-items: start; } | |
| } | |
| /* ===== Hugging Face demo-only layout ===== */ | |
| .demo-header { grid-template-columns: 220px minmax(0, 1fr) 90px; } | |
| .demo-header nav { overflow: visible; } | |
| .demo-case-wrap { max-width: 980px; margin: 22px auto 0; padding: 0 24px; } | |
| .demo-case-bar { display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(260px, 1.2fr) minmax(210px, .8fr); gap: 18px; align-items: end; padding: 16px 18px; } | |
| .demo-case-bar label { min-width: 0; } | |
| .demo-readonly-field { min-width: 0; display: flex; flex-direction: column; gap: 7px; } | |
| .demo-readonly-field > span { font-size: 14px; font-weight: 600; } | |
| .demo-readonly-field a, .demo-readonly-field strong { display: block; min-height: 42px; padding: 10px 11px; border: 1px solid #e1e3e6; border-radius: 8px; background: #f8f9fa; color: #303338; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .demo-readonly-field select { min-height: 42px; } | |
| .demo-readonly-field a:hover { text-decoration: underline; } | |
| .demo-case-error { max-width: 980px; margin: 10px auto 0; } | |
| .demo-launch-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; } | |
| .demo-launch-card > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; } | |
| .demo-launch-card strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .demo-launch-card span { color: #747a81; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .demo-run-state { margin: 14px 0 22px; } | |
| .demo-run-line { display: flex; align-items: center; gap: 12px; } | |
| .demo-run-line > div { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } | |
| .demo-run-line strong { font-size: 14px; } | |
| .demo-run-line span { color: #737980; font-size: 13px; } | |
| .demo-spinner { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d5d9dd; border-top-color: #202124; animation: demo-spin .9s linear infinite; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; } | |
| .demo-spinner.done { border-color: #cfe6d5; background: #eef8f1; color: #2d6a3b; animation: none; font-weight: 700; } | |
| @keyframes demo-spin { to { transform: rotate(360deg); } } | |
| .demo-step-state progress { margin-bottom: 14px; } | |
| .demo-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } | |
| .demo-steps > div { min-width: 0; padding: 10px; border: 1px solid #e6e8ea; border-radius: 9px; background: #fafafa; display: flex; align-items: flex-start; gap: 8px; color: #7a8086; font-size: 12px; line-height: 1.35; } | |
| .demo-steps > div b { width: 18px; height: 18px; border-radius: 50%; background: #eceeef; color: #666c72; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 10px; } | |
| .demo-steps > div.active { border-color: #c7ccd1; background: #fff; color: #202124; } | |
| .demo-steps > div.complete { border-color: #d6e8da; background: #f4faf5; color: #356443; } | |
| .demo-steps > div.complete b { background: #dcefe1; color: #2e6b3e; } | |
| @media (max-width: 900px) { | |
| .demo-header { grid-template-columns: 150px minmax(0, 1fr) auto; padding: 0 16px; gap: 10px; } | |
| .brand span { display: none; } | |
| .demo-case-bar { grid-template-columns: 1fr 1fr; } | |
| .demo-readonly-field.compact { grid-column: 1 / -1; } | |
| .demo-steps { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 640px) { | |
| .app-header.demo-header { height: auto; min-height: 64px; grid-template-columns: 1fr auto; padding: 10px 14px; } | |
| .demo-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } | |
| .demo-header .header-tools { grid-column: 2; grid-row: 1; } | |
| .demo-case-wrap { padding: 0 14px; } | |
| .demo-case-bar { grid-template-columns: 1fr; } | |
| .demo-readonly-field.compact { grid-column: auto; } | |
| .demo-launch-card { align-items: stretch; flex-direction: column; } | |
| .demo-launch-card .button { width: 100%; } | |
| } | |