File: C:/Users/fred/.codex/.tmp/plugins/plugins/codex-security/assets/report_template_inlined.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{escaped_title}</title>
<style>
:root {
color-scheme: light dark;
--bg: #fff;
--bg-elev: #fafafa;
--bg-muted: #f5f5f7;
--fg: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--accent: #2563eb;
--code: #f3f4f6;
--shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b0f14;
--bg-elev: #0f141b;
--bg-muted: #121923;
--fg: #e5e7eb;
--muted: #9ca3af;
--border: #243040;
--accent: #60a5fa;
--code: #111827;
--shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
min-height: 100vh;
}
body.sidebar-collapsed .layout { grid-template-columns: 44px minmax(0, 1fr); }
.sidebar {
min-height: 100vh;
border-right: 1px solid var(--border);
background: var(--bg-muted);
}
.toc-inner {
position: sticky;
top: 0;
height: 100vh;
overflow: auto;
padding: 10px 8px;
}
.nav-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
margin: 0 0 8px;
text-transform: uppercase;
}
.nav-toggle {
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
}
.nav-toggle:hover { box-shadow: var(--shadow); }
.nav-meta { color: var(--muted); font-size: 12px; margin: 0 0 12px; padding: 0 4px; }
body.sidebar-collapsed .toc-inner {
display: flex;
align-items: center;
padding: 8px 6px;
}
body.sidebar-collapsed .nav-title span,
body.sidebar-collapsed .nav-meta,
body.sidebar-collapsed .toc { display: none; }
main { max-width: 1040px; padding: 32px 44px 80px; }
h1, h2, h3 { line-height: 1.2; margin-top: 1.7em; }
h1:first-child { margin-top: 0; }
h2 { border-top: 1px solid var(--border); padding-top: 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--code); border-radius: 4px; padding: 0.1em 0.3em; }
pre { background: var(--code); border: 1px solid var(--border); border-radius: 8px; overflow: auto; padding: 16px; }
pre code { background: transparent; padding: 0; }
table { border-collapse: collapse; width: 100%; margin: 18px 0; }
th, td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }
th { text-align: left; background: var(--code); }
main h3[id^="0-"] + table,
main h3[id^="1-"] + table,
main h3[id^="2-"] + table,
main h3[id^="3-"] + table,
main h3[id^="4-"] + table,
main h3[id^="5-"] + table,
main h3[id^="6-"] + table,
main h3[id^="7-"] + table,
main h3[id^="8-"] + table,
main h3[id^="9-"] + table {
margin: 10px 0 24px;
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
background: var(--bg-elev);
box-shadow: var(--shadow);
}
main h3[id^="0-"] + table th,
main h3[id^="1-"] + table th,
main h3[id^="2-"] + table th,
main h3[id^="3-"] + table th,
main h3[id^="4-"] + table th,
main h3[id^="5-"] + table th,
main h3[id^="6-"] + table th,
main h3[id^="7-"] + table th,
main h3[id^="8-"] + table th,
main h3[id^="9-"] + table th { display: none; }
main h3[id^="0-"] + table td:first-child,
main h3[id^="1-"] + table td:first-child,
main h3[id^="2-"] + table td:first-child,
main h3[id^="3-"] + table td:first-child,
main h3[id^="4-"] + table td:first-child,
main h3[id^="5-"] + table td:first-child,
main h3[id^="6-"] + table td:first-child,
main h3[id^="7-"] + table td:first-child,
main h3[id^="8-"] + table td:first-child,
main h3[id^="9-"] + table td:first-child {
width: 170px;
color: var(--muted);
font-weight: 700;
white-space: nowrap;
}
main h3[id^="0-"] + table td,
main h3[id^="1-"] + table td,
main h3[id^="2-"] + table td,
main h3[id^="3-"] + table td,
main h3[id^="4-"] + table td,
main h3[id^="5-"] + table td,
main h3[id^="6-"] + table td,
main h3[id^="7-"] + table td,
main h3[id^="8-"] + table td,
main h3[id^="9-"] + table td { border-left: 0; border-right: 0; }
.toc { list-style: none; padding: 0; margin: 0; }
.toc a {
display: block;
border-radius: 6px;
color: var(--fg);
font-size: 13px;
line-height: 1.3;
padding: 4px 6px;
position: relative;
transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}
.toc a:hover { background: var(--bg-elev); text-decoration: none; }
.toc-item { list-style: none; margin: 1px 0; }
.toc-item.depth-1 > a { font-weight: 700; }
.toc-item.depth-2 { padding-left: 14px; }
.toc-item.depth-3 { padding-left: 28px; }
.toc-item.active > a {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
font-weight: 700;
padding-left: 10px;
}
.toc-item.active > a::before {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
border-radius: 2px;
background: var(--accent);
}
@media (max-width: 900px) {
.layout { display: block; }
.sidebar { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
.toc-inner { position: static; height: auto; max-height: 45vh; }
main { padding: 24px; }
}
</style>
</head>
<body>
<div class="layout">
<aside class="sidebar" aria-label="Table of contents">
<div class="toc-inner">
<div class="nav-title">
<span>Outline</span>
<button id="navToggle" class="nav-toggle" aria-pressed="false" aria-label="Collapse sidebar" title="Collapse sidebar">
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path id="navToggleIcon" d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
<div class="nav-meta">{escaped_title}</div>
<ul class="toc">
{toc_items}
</ul>
</div>
</aside>
<main>
{report_body}
</main>
</div>
<script>
const toggle = document.getElementById('navToggle');
const icon = document.getElementById('navToggleIcon');
const collapsedKey = 'codex-security-report:sidebar-collapsed';
function setCollapsed(collapsed) {
document.body.classList.toggle('sidebar-collapsed', collapsed);
if (toggle) {
toggle.setAttribute('aria-pressed', collapsed ? 'true' : 'false');
toggle.setAttribute('aria-label', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
toggle.setAttribute('title', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
}
if (icon) icon.setAttribute('d', collapsed ? 'M9 6l6 6-6 6' : 'M15 6l-6 6 6 6');
try { localStorage.setItem(collapsedKey, collapsed ? '1' : '0'); } catch {}
}
try { setCollapsed(localStorage.getItem(collapsedKey) === '1'); } catch {}
if (toggle) toggle.addEventListener('click', () => setCollapsed(!document.body.classList.contains('sidebar-collapsed')));
const tocLinks = Array.from(document.querySelectorAll('.toc a'));
const sections = tocLinks.map((link) => {
const id = decodeURIComponent(link.getAttribute('href').slice(1));
return [link, document.getElementById(id)];
}).filter((pair) => pair[1]);
const observer = new IntersectionObserver((entries) => {
const visible = entries
.filter((entry) => entry.isIntersecting)
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
if (!visible) return;
tocLinks.forEach((link) => link.parentElement.classList.remove('active'));
const active = tocLinks.find((link) => link.getAttribute('href') === '#' + visible.target.id);
if (active) active.parentElement.classList.add('active');
}, { rootMargin: '-10% 0px -75% 0px', threshold: [0, 1] });
sections.forEach(([, section]) => observer.observe(section));
</script>
</body>
</html>