/* Authored reference, not a live monitoring surface. */
.system-overview { margin: 1.5rem 0; padding: 1rem; border: 1px solid currentColor; border-radius: 1rem; min-width: 0; max-width: 100%; }
.system-overview summary { cursor: pointer; font-weight: 700; }
.system-overview p, .system-overview td, .system-overview th { overflow-wrap: anywhere; }
.system-flow { margin: 1.5rem 0; }
.system-flow ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.system-flow li { padding: .7rem; border: 1px solid currentColor; border-radius: .5rem; }
.system-flow li:not(:last-child)::after { content: ' →'; }
.system-flow figcaption { font-size: .9rem; }
.system-table-scroll { overflow-x: auto; max-width: 100%; margin: 1.5rem 0; }
.system-overview table { width: 100%; min-width: 36rem; border-collapse: collapse; text-align: left; font-size: .9rem; }
.system-overview caption { text-align: left; font-weight: 700; padding: .5rem 0; }
.system-overview th, .system-overview td { padding: .7rem; border-bottom: 1px solid currentColor; vertical-align: top; }
.system-overview tbody th { white-space: nowrap; overflow-wrap: normal; }
.system-overview :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (max-width: 600px) { .system-flow ol { flex-direction: column; } .system-flow li:not(:last-child)::after { content: ' ↓'; } }