: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 !important; } .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 !important; 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 !important; } } /* 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 !important; } .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 !important; } } /* 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%; } }