/* The Security page (SecurityController): the environments' live state, then docs/security.md. */

.security-summary { margin-bottom: 0.85rem; max-width: none; }
.security-table td { vertical-align: top; }
.security-table__reach { white-space: nowrap; }
.security-table__reach svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 0.3rem; color: var(--muted); }
.security-table__row--attention td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.security-flag { color: var(--warn); font-weight: 500; }
.security-table__when { white-space: nowrap; color: var(--ink-soft); }
.security-badge { margin-left: 0.35rem; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

/* docs/security.md, rendered: text in a readable column, tables the panel's width (scrolling on their
   own on a phone). */
.prose > p, .prose > ul, .prose > ol { max-width: 78ch; }
.prose h2 { font-size: 1.05rem; margin: 2rem 0 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.prose > h2:first-of-type { margin-top: 1.25rem; }
.prose h3 { margin: 1.25rem 0 0.5rem; }
.prose p, .prose li { line-height: 1.55; color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 0.85rem; }
.prose li { margin: 0.3rem 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.9rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); min-width: 8rem; }
.prose th { font-weight: 500; color: var(--muted); }
.prose td:first-child { color: var(--ink); }
.table-scroll + p { margin-top: 0.75rem; margin-bottom: 0; }