/* report.css: the 186 public report pages. Loads AFTER /brand.css and /pages.css, which
   supply the nav, footer, buttons, tier labels, score line, score scale and forest call to
   action. Applied to the generated pages by scripts/restyle-reports.py. Tokens only. */

.rpt { padding-bottom: var(--sc-space-8); }

/* header: breadcrumb, skill name, when and where, tier label */
.rpt-head { padding: var(--sc-space-8) 0 var(--sc-space-6); }
.rpt-head .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sc-space-5); flex-wrap: wrap; }
.rpt-title { flex: 1; min-width: 0; }
.rpt-name { font-size: var(--sc-text-h1); color: var(--sc-ink-950); overflow-wrap: anywhere; }
.rpt-meta { margin-top: var(--sc-space-3); font-size: var(--sc-text-body); color: var(--sc-ink-600); }
.rpt-meta a { color: var(--sc-ink-800); text-decoration: underline; text-decoration-color: var(--sc-ink-300); text-underline-offset: 3px; }
.rpt-meta a:hover { color: var(--sc-green-700); text-decoration-color: var(--sc-green-700); }
.rpt-head .tier { margin-top: var(--sc-space-2); }

/* score: the number and grade, the 0-100 scale with the four grades, then the counts */
.score-block { padding: var(--sc-space-6) 0; border-top: 1px solid var(--sc-ink-200); border-bottom: 1px solid var(--sc-ink-200); }
.score-block .score b { font-size: var(--sc-text-display); }
.score-block .score .grade { font-size: var(--sc-text-h2); }
.score-block .scale { max-width: 640px; }
.score-counts { display: flex; flex-wrap: wrap; gap: var(--sc-space-2) var(--sc-space-6); margin-top: var(--sc-space-5); font-size: var(--sc-text-body); color: var(--sc-ink-600); }
.score-counts .ci { display: flex; align-items: baseline; gap: var(--sc-space-2); }
.score-counts .n { font-family: var(--sc-font-mono); font-size: var(--sc-text-lede); font-weight: 600; color: var(--sc-ink-950); font-variant-numeric: tabular-nums; }
/* the segment that holds the score takes its grade color (pages.css covers good and excellent) */
.score-block .scale[data-at="poor"] .scale-track .s-poor { background: var(--sc-grade-poor); }
.score-block .scale[data-at="needs-work"] .scale-track .s-nw { background: var(--sc-grade-needs-work); }

/* Free-tier reports: the note, locked domain cards and the Pro teaser */
.free-banner { margin-bottom: var(--sc-space-5); padding: var(--sc-space-4) var(--sc-space-5); background: var(--sc-paper-2); font-size: var(--sc-text-body); line-height: 1.55; color: var(--sc-ink-800); }
.domain-card.locked { background: var(--sc-paper-2); }
.domain-card .lockrow { display: flex; align-items: center; gap: var(--sc-space-2); margin-top: var(--sc-space-3); font-size: var(--sc-text-small); font-weight: 600; color: var(--sc-green-700); }
.locked-teaser { margin-top: var(--sc-space-2); font-size: var(--sc-text-small); color: var(--sc-ink-600); }
.pro-teaser { margin-top: var(--sc-space-6); padding: var(--sc-space-6); background: var(--sc-forest); color: var(--sc-ondark); }
.pro-teaser h3 { font-size: var(--sc-text-h3); color: var(--sc-ondark); }
.pro-teaser .doms { display: flex; flex-direction: column; gap: var(--sc-space-2); margin: var(--sc-space-4) 0 var(--sc-space-5); }
.pro-teaser .doms span { font-size: var(--sc-text-body); color: var(--sc-forest-muted); }
.pro-teaser :focus-visible { outline-color: var(--sc-green-400); }

/* sections */
.rpt-section, .owasp-section { padding: var(--sc-space-6) 0; border-bottom: 1px solid var(--sc-ink-200); }
.section-title { margin-bottom: var(--sc-space-5); font-size: var(--sc-text-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--sc-ink-950); }

/* domain scores: a ruled grid like the rest of the site */
.domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--sc-ink-200); border: 1px solid var(--sc-ink-200); }
.domain-card { padding: var(--sc-space-5) var(--sc-space-6); background: var(--sc-paper); }
.domain-card .dn { font-size: var(--sc-text-body); font-weight: 500; color: var(--sc-ink-800); }
.domain-card .ds { margin-top: var(--sc-space-2); font-family: var(--sc-font-mono); font-size: var(--sc-text-h2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .domain-grid { grid-template-columns: 1fr; } }

/* findings: severity is a word, never a side bar */
.issue-group + .issue-group { margin-top: var(--sc-space-6); }
.issue-group h3 { margin-bottom: var(--sc-space-1); font-size: var(--sc-text-body); }
.issue { padding: var(--sc-space-4) 0; border-bottom: 1px solid var(--sc-ink-200); }
.issue:last-child { border-bottom: 0; }
.issue .id { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); font-weight: 600; color: var(--sc-ink-950); }
.issue .ln { margin-left: var(--sc-space-3); font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); }
.issue .msg { margin-top: var(--sc-space-1); font-size: var(--sc-text-body); line-height: 1.5; color: var(--sc-ink-800); }
.issue .fix { margin-top: var(--sc-space-1); font-size: var(--sc-text-small); line-height: 1.5; color: var(--sc-green-700); }
.count-num { font-weight: 600; }
.count-num.critical { color: var(--sc-critical); }
.count-num.warning { color: var(--sc-warning); }
.count-num.suggestion { color: var(--sc-suggestion); }
.count-num.passed { color: var(--sc-green-700); }

/* OWASP Agentic (Cat 26) */
.owasp-activation { margin-bottom: var(--sc-space-4); font-size: var(--sc-text-body); color: var(--sc-ink-600); }
.owasp-counts { display: flex; gap: var(--sc-space-5); margin-bottom: var(--sc-space-3); font-size: var(--sc-text-body); }
.owasp-sev { margin-right: var(--sc-space-2); font-family: var(--sc-font-mono); font-size: var(--sc-text-label); letter-spacing: 0.04em; text-transform: uppercase; }
.owasp-clean { font-size: var(--sc-text-body); color: var(--sc-green-700); }
.issue-list { margin: 0; padding: 0; list-style: none; }
.issue-item { padding: var(--sc-space-3) 0; border-bottom: 1px solid var(--sc-ink-200); font-size: var(--sc-text-body); }
.issue-item:last-child { border-bottom: 0; }
.issue-id { margin-right: var(--sc-space-2); font-family: var(--sc-font-mono); font-size: var(--sc-text-label); font-weight: 600; color: var(--sc-ink-950); }
.issue-line { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); }
.issue-fix { margin-top: var(--sc-space-1); font-size: var(--sc-text-small); color: var(--sc-green-700); }
.owasp-rollup { display: flex; flex-wrap: wrap; gap: var(--sc-space-2) var(--sc-space-5); margin-top: var(--sc-space-4); }
.owasp-item { font-family: var(--sc-font-mono); font-size: var(--sc-text-label); color: var(--sc-ink-600); }
.owasp-item.owasp-fail { color: var(--sc-critical); }
.owasp-item.owasp-pass { color: var(--sc-green-700); }

/* badges: earned is green, missed is gray; the label tells them apart */
.shield-list { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); }
.shield { display: inline-flex; align-items: center; height: 24px; font-family: var(--sc-font-mono); font-size: var(--sc-text-label); line-height: 24px; white-space: nowrap; }
.shield .l { padding: 0 var(--sc-space-2); background: var(--sc-ink-950); color: var(--sc-ondark); }
.shield .r { padding: 0 var(--sc-space-2); background: var(--sc-green-700); color: var(--sc-ondark); }
.shield.missed .r { background: var(--sc-ink-600); }

/* marker position for each score, (score + 0.5) / 101, the homepage scale's mapping
   (77 -> 76.7%, 92 -> 91.6%); generated so no page needs an inline style */
.score-block .scale .scale-marker.at-0 { left: 0.5%; }
.score-block .scale .scale-marker.at-1 { left: 1.5%; }
.score-block .scale .scale-marker.at-2 { left: 2.5%; }
.score-block .scale .scale-marker.at-3 { left: 3.5%; }
.score-block .scale .scale-marker.at-4 { left: 4.5%; }
.score-block .scale .scale-marker.at-5 { left: 5.4%; }
.score-block .scale .scale-marker.at-6 { left: 6.4%; }
.score-block .scale .scale-marker.at-7 { left: 7.4%; }
.score-block .scale .scale-marker.at-8 { left: 8.4%; }
.score-block .scale .scale-marker.at-9 { left: 9.4%; }
.score-block .scale .scale-marker.at-10 { left: 10.4%; }
.score-block .scale .scale-marker.at-11 { left: 11.4%; }
.score-block .scale .scale-marker.at-12 { left: 12.4%; }
.score-block .scale .scale-marker.at-13 { left: 13.4%; }
.score-block .scale .scale-marker.at-14 { left: 14.4%; }
.score-block .scale .scale-marker.at-15 { left: 15.3%; }
.score-block .scale .scale-marker.at-16 { left: 16.3%; }
.score-block .scale .scale-marker.at-17 { left: 17.3%; }
.score-block .scale .scale-marker.at-18 { left: 18.3%; }
.score-block .scale .scale-marker.at-19 { left: 19.3%; }
.score-block .scale .scale-marker.at-20 { left: 20.3%; }
.score-block .scale .scale-marker.at-21 { left: 21.3%; }
.score-block .scale .scale-marker.at-22 { left: 22.3%; }
.score-block .scale .scale-marker.at-23 { left: 23.3%; }
.score-block .scale .scale-marker.at-24 { left: 24.3%; }
.score-block .scale .scale-marker.at-25 { left: 25.2%; }
.score-block .scale .scale-marker.at-26 { left: 26.2%; }
.score-block .scale .scale-marker.at-27 { left: 27.2%; }
.score-block .scale .scale-marker.at-28 { left: 28.2%; }
.score-block .scale .scale-marker.at-29 { left: 29.2%; }
.score-block .scale .scale-marker.at-30 { left: 30.2%; }
.score-block .scale .scale-marker.at-31 { left: 31.2%; }
.score-block .scale .scale-marker.at-32 { left: 32.2%; }
.score-block .scale .scale-marker.at-33 { left: 33.2%; }
.score-block .scale .scale-marker.at-34 { left: 34.2%; }
.score-block .scale .scale-marker.at-35 { left: 35.1%; }
.score-block .scale .scale-marker.at-36 { left: 36.1%; }
.score-block .scale .scale-marker.at-37 { left: 37.1%; }
.score-block .scale .scale-marker.at-38 { left: 38.1%; }
.score-block .scale .scale-marker.at-39 { left: 39.1%; }
.score-block .scale .scale-marker.at-40 { left: 40.1%; }
.score-block .scale .scale-marker.at-41 { left: 41.1%; }
.score-block .scale .scale-marker.at-42 { left: 42.1%; }
.score-block .scale .scale-marker.at-43 { left: 43.1%; }
.score-block .scale .scale-marker.at-44 { left: 44.1%; }
.score-block .scale .scale-marker.at-45 { left: 45.0%; }
.score-block .scale .scale-marker.at-46 { left: 46.0%; }
.score-block .scale .scale-marker.at-47 { left: 47.0%; }
.score-block .scale .scale-marker.at-48 { left: 48.0%; }
.score-block .scale .scale-marker.at-49 { left: 49.0%; }
.score-block .scale .scale-marker.at-50 { left: 50.0%; }
.score-block .scale .scale-marker.at-51 { left: 51.0%; }
.score-block .scale .scale-marker.at-52 { left: 52.0%; }
.score-block .scale .scale-marker.at-53 { left: 53.0%; }
.score-block .scale .scale-marker.at-54 { left: 54.0%; }
.score-block .scale .scale-marker.at-55 { left: 55.0%; }
.score-block .scale .scale-marker.at-56 { left: 55.9%; }
.score-block .scale .scale-marker.at-57 { left: 56.9%; }
.score-block .scale .scale-marker.at-58 { left: 57.9%; }
.score-block .scale .scale-marker.at-59 { left: 58.9%; }
.score-block .scale .scale-marker.at-60 { left: 59.9%; }
.score-block .scale .scale-marker.at-61 { left: 60.9%; }
.score-block .scale .scale-marker.at-62 { left: 61.9%; }
.score-block .scale .scale-marker.at-63 { left: 62.9%; }
.score-block .scale .scale-marker.at-64 { left: 63.9%; }
.score-block .scale .scale-marker.at-65 { left: 64.9%; }
.score-block .scale .scale-marker.at-66 { left: 65.8%; }
.score-block .scale .scale-marker.at-67 { left: 66.8%; }
.score-block .scale .scale-marker.at-68 { left: 67.8%; }
.score-block .scale .scale-marker.at-69 { left: 68.8%; }
.score-block .scale .scale-marker.at-70 { left: 69.8%; }
.score-block .scale .scale-marker.at-71 { left: 70.8%; }
.score-block .scale .scale-marker.at-72 { left: 71.8%; }
.score-block .scale .scale-marker.at-73 { left: 72.8%; }
.score-block .scale .scale-marker.at-74 { left: 73.8%; }
.score-block .scale .scale-marker.at-75 { left: 74.8%; }
.score-block .scale .scale-marker.at-76 { left: 75.7%; }
.score-block .scale .scale-marker.at-77 { left: 76.7%; }
.score-block .scale .scale-marker.at-78 { left: 77.7%; }
.score-block .scale .scale-marker.at-79 { left: 78.7%; }
.score-block .scale .scale-marker.at-80 { left: 79.7%; }
.score-block .scale .scale-marker.at-81 { left: 80.7%; }
.score-block .scale .scale-marker.at-82 { left: 81.7%; }
.score-block .scale .scale-marker.at-83 { left: 82.7%; }
.score-block .scale .scale-marker.at-84 { left: 83.7%; }
.score-block .scale .scale-marker.at-85 { left: 84.7%; }
.score-block .scale .scale-marker.at-86 { left: 85.6%; }
.score-block .scale .scale-marker.at-87 { left: 86.6%; }
.score-block .scale .scale-marker.at-88 { left: 87.6%; }
.score-block .scale .scale-marker.at-89 { left: 88.6%; }
.score-block .scale .scale-marker.at-90 { left: 89.6%; }
.score-block .scale .scale-marker.at-91 { left: 90.6%; }
.score-block .scale .scale-marker.at-92 { left: 91.6%; }
.score-block .scale .scale-marker.at-93 { left: 92.6%; }
.score-block .scale .scale-marker.at-94 { left: 93.6%; }
.score-block .scale .scale-marker.at-95 { left: 94.6%; }
.score-block .scale .scale-marker.at-96 { left: 95.5%; }
.score-block .scale .scale-marker.at-97 { left: 96.5%; }
.score-block .scale .scale-marker.at-98 { left: 97.5%; }
.score-block .scale .scale-marker.at-99 { left: 98.5%; }
.score-block .scale .scale-marker.at-100 { left: 99.5%; }