{% extends "html/base.html" %}
{% block head_extra %}
<style>
.page-main > .panel {
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
padding: 30px 0 40px;
box-shadow: none;
}
.page-main > .grid { padding-top: 18px; }
.discovery-columns,
.intelligence-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.intelligence-card {
display: grid;
gap: 7px;
min-width: 0;
border-bottom: 1px solid var(--line);
padding: 14px 0 18px;
}
.intelligence-card > span {
width: fit-content;
color: var(--warn);
font-family: var(--font-mono);
font-size: .62rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.intelligence-card[data-state="ready"] > span { color: var(--success-strong); }
.intelligence-card p { margin: 0; color: var(--muted); font-size: .78rem; }
.capability-filters {
display: flex;
gap: 5px;
max-width: 100%;
overflow-x: auto;
margin: 18px 0 14px;
padding-bottom: 4px;
scrollbar-width: thin;
}
.capability-filters button {
flex: none;
min-height: 36px;
border: 0;
border-radius: 5px;
background: var(--surface-soft);
color: var(--muted);
padding: 7px 11px;
font-family: var(--font-mono);
font-size: .63rem;
cursor: pointer;
}
.capability-filters button[aria-pressed="true"] {
background: var(--ink);
color: var(--bg);
}
.capability-canvas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
min-height: 260px;
background-color: color-mix(in srgb, var(--panel) 74%, var(--bg));
background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 1.25px);
background-size: 22px 22px;
padding: 22px;
}
.capability-node {
display: grid;
align-content: start;
gap: 7px;
min-width: 0;
min-height: 144px;
border: 1px solid var(--line);
border-radius: 7px;
background: color-mix(in srgb, var(--panel) 96%, transparent);
padding: 16px;
transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.capability-node:hover {
transform: translateY(-2px);
border-color: var(--accent);
}
.capability-node[hidden] { display: none; }
.capability-node > span {
color: var(--accent-strong);
font-family: var(--font-mono);
font-size: .6rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.capability-node p { margin: 0; color: var(--muted); font-size: .74rem; }
.capability-node code { margin-top: auto; font-size: .64rem; }
.discovery-mermaid {
margin: 24px 0 0;
border: 0;
background: transparent;
}
.discovery-mermaid .diagram-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--line);
padding: 12px 0;
}
.discovery-mermaid .diagram-toolbar strong {
font-size: .76rem;
}
.discovery-mermaid .diagram-toolbar-actions {
display: flex;
gap: 5px;
}
.discovery-mermaid [data-diagram-view] {
min-height: var(--control-height);
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--panel);
color: var(--muted);
padding: 7px 11px;
font-family: var(--font-mono);
font-size: .64rem;
cursor: pointer;
}
.discovery-mermaid [data-diagram-view][aria-pressed="true"] {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-strong);
}
.discovery-mermaid.is-enhanced .mermaid-diagram { display: block; }
.discovery-mermaid.is-enhanced .mermaid-fallback { display: none; }
.discovery-mermaid.is-code .mermaid-diagram { display: none; }
.discovery-mermaid.is-code .mermaid-fallback { display: block; }
.discovery-flow-canvas {
display: grid;
grid-template-columns: minmax(116px, 1fr) 36px minmax(116px, 1fr) 36px minmax(116px, 1fr) 36px minmax(116px, 1fr) 36px minmax(116px, 1fr);
align-items: center;
min-height: 280px;
overflow-x: auto;
background-color: color-mix(in srgb, var(--panel) 74%, var(--bg));
background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 1.25px);
background-size: 22px 22px;
padding: 28px;
}
.discovery-flow-node {
display: grid;
min-width: 0;
min-height: 112px;
align-content: center;
gap: 5px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: color-mix(in srgb, var(--panel) 97%, transparent);
color: var(--ink);
padding: 14px;
text-decoration: none;
transition: border-color var(--motion-fast) ease, transform var(--motion-fast) ease, background var(--motion-fast) ease;
}
.discovery-flow-node:hover,
.discovery-flow-node:focus-visible {
border-color: var(--accent);
background: var(--accent-soft);
transform: translateY(-3px);
}
.discovery-flow-node > span,
.discovery-flow-node > small {
color: var(--muted);
font-family: var(--font-mono);
font-size: .6rem;
}
.discovery-flow-node > span { color: var(--accent-strong); }
.discovery-flow-node > strong { font-size: .78rem; }
.discovery-flow-edge {
position: relative;
height: 1px;
overflow: hidden;
background: var(--line);
}
.discovery-flow-edge::after {
content: "›";
position: absolute;
right: 0;
top: 50%;
color: var(--accent-strong);
transform: translateY(-55%);
}
.discovery-flow-edge i {
position: absolute;
top: -2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
animation: discovery-data-flow 1.7s linear infinite;
}
@keyframes discovery-data-flow {
from { left: -5px; }
to { left: calc(100% + 5px); }
}
@media (max-width: 640px) {
.discovery-columns,
.intelligence-grid { grid-template-columns: 1fr; }
.capability-canvas { grid-template-columns: 1fr; padding: 14px; }
.discovery-flow-canvas {
grid-template-columns: 1fr;
min-height: 0;
}
.discovery-flow-edge {
width: 1px;
height: 32px;
justify-self: center;
}
.discovery-flow-edge::after {
right: auto;
bottom: -4px;
top: auto;
transform: rotate(90deg);
}
.discovery-flow-edge i {
top: -5px;
left: -2px;
animation-name: discovery-data-flow-vertical;
}
@keyframes discovery-data-flow-vertical {
from { top: -5px; }
to { top: calc(100% + 5px); }
}
}
</style>
{% endblock %}
{% block content %}
{{ content_html|safe }}
{% include "html/partials/traceability.html" %}
<script>
(() => {
const buttons = [...document.querySelectorAll("[data-capability-filter]")];
const nodes = [...document.querySelectorAll(".capability-node")];
buttons.forEach((button) => {
button.addEventListener("click", () => {
const filter = button.dataset.capabilityFilter;
buttons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
nodes.forEach((node) => {
node.hidden = filter !== "all" && !node.dataset.stages.split(/\s+/).includes(filter);
});
});
});
document.querySelectorAll("[data-discovery-mermaid]").forEach((diagram) => {
const controls = [...diagram.querySelectorAll("[data-diagram-view]")];
controls.forEach((control) => {
control.addEventListener("click", () => {
const code = control.dataset.diagramView === "code";
diagram.classList.toggle("is-code", code);
controls.forEach((item) => item.setAttribute("aria-pressed", String(item === control)));
});
});
});
})();
</script>
{% endblock %}