src/styles.css

: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%; }
}