{{define "head"}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --bg: #ffffff; --fg: #1a1f24; --muted: #667; --line: #e3e6ea; --card: #f6f7f9;
  --a: #2da44e; --b: #97ca00; --c: #dfb317; --d: #fe7d37; --f: #e05d44; --u: #9f9f9f;
  --link: #0b62c4;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1116; --fg: #e6e9ee; --muted: #99a; --line: #262c35; --card: #161b22; --link: #58a6ff; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0.5rem 0 0.25rem; }
h1 a { color: inherit; }
.sub { color: var(--muted); margin: 0 0 1.5rem; }
.grade { display: inline-block; min-width: 1.6em; padding: 0.05em 0.35em; border-radius: 4px;
  color: #fff; font-weight: 700; text-align: center; }
.grade-A { background: var(--a); } .grade-B { background: var(--b); }
.grade-C { background: var(--c); } .grade-D { background: var(--d); }
.grade-F { background: var(--f); } .grade-\? { background: var(--u); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
tr:hover td { background: var(--card); }
.sevrow td { border-bottom: none; padding-top: 0.15rem; padding-bottom: 0.15rem; }
.sev { font-size: 0.78rem; font-weight: 700; border-radius: 3px; padding: 0.1em 0.4em; color: #fff; }
.sev-info { background: #6c7a89; } .sev-warn { background: var(--c); }
.sev-error { background: var(--d); } .sev-critical { background: var(--f); }
.tiles { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.6rem 1rem; min-width: 5.5rem; }
.tile b { display: block; font-size: 1.3rem; }
.tile span { color: var(--muted); font-size: 0.8rem; }
input[type=search] { width: 100%; max-width: 24rem; padding: 0.45rem 0.7rem; margin: 0 0 1rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
code, .loc { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 0.85em; }
.loc { color: var(--muted); }
.notice { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.7rem 1rem; color: var(--muted); font-size: 0.88rem; margin: 1.25rem 0; }
.doc { max-width: 46rem; }
footer { margin-top: 3rem; color: var(--muted); font-size: 0.8rem; }
.overflow { overflow-x: auto; }
</style>
{{end}}

{{define "footer"}}
<footer>
  Generated by <a href="https://github.com/jmelahman/pkglint">pkglint</a> — a static hygiene
  score for PKGBUILDs, not a malware verdict. A low grade means "worth reviewing", never
  "malicious", and a high grade is not an endorsement.
</footer>
{{end}}