.compact-context-window { padding:18px 16px; background:white; border:1px solid #c7d7e6; border-radius:12px; box-shadow:0 12px 32px #10295108; }
.compact-context-heading { display:flex; flex-direction:column; gap:5px; }
.compact-context-heading>span { color:var(--blue); font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.compact-context-heading>strong { color:var(--navy); font-size:1.25rem; font-weight:550; line-height:1.3; letter-spacing:-.02em; }
.compact-context-sources { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:17px; }
.compact-context-sources>span { padding:8px 10px; border:1px solid #d5e2ee; border-radius:6px; background:#f8fafc; color:var(--ink); font-size:.875rem; line-height:1.4; }
.compact-context-arrow { text-align:center; height:26px; font-size:20px; line-height:26px; color:#6b8dac; }
.compact-context-graph { position:relative; height:180px; background:#edf5fc; border:1px solid var(--line); border-radius:10px; }
.compact-context-graph>svg { position:absolute; width:100%; height:100%; }
.compact-context-link { fill:none; stroke:#adc6dc; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.compact-context-node { position:absolute; display:flex; align-items:center; justify-content:center; width:31%; min-height:38px; transform:translate(-50%,-50%); padding:7px 5px; border:1px solid #b5ccdf; border-radius:6px; background:white; color:var(--blue); font-size:.875rem; line-height:1.4; }
.cc-requirement { left:18%; top:15%; }
.cc-design { left:82%; top:15%; }
.cc-test { left:18%; top:85%; }
.cc-evidence { left:82%; top:85%; }
.compact-context-core { position:absolute; left:50%; top:50%; width:max-content; max-width:75%; padding:10px 16px; transform:translate(-50%,-50%); border:1px solid #102951; border-radius:24px; background:#102951; color:white; font-size:1rem; line-height:1.4; font-weight:550; text-align:center; }
.compact-context-provenance { padding:0; margin:9px 0 0; color:var(--muted); text-align:center; font-size:.75rem; line-height:1.6; }
.compact-context-outputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.compact-context-outputs>span { padding:9px 5px; border:1px solid #c7d9e9; border-radius:6px; background:#f8fafc; color:var(--blue); font-size:.875rem; font-weight:500; line-height:1.4; text-align:center; }
.context-compact [data-context-phases] { transition:background 500ms,border-color 500ms,color 500ms; }
.context-compact :is(.compact-context-sources>span,.compact-context-node,.compact-context-outputs>span).is-active { background:#e1effb; border-color:#4d82b1; }
.context-compact .compact-context-core.is-active { background:#1b4f8a; border-color:#1b4f8a; }
.context-compact .compact-context-provenance.is-active { color:var(--blue); }
@container engineering-preview (max-width:380px) { .compact-context-window { padding:14px 10px; } .compact-context-sources { gap:6px; } .compact-context-sources>span { padding:7px 8px; } .compact-context-graph { height:190px; } .compact-context-node { width:36%; } }
@media(prefers-reduced-motion:reduce) { .context-compact [data-context-phases] { transition:none; } }