/* security.html: the sample security log, the honesty card and the report-a-problem box. */
.sec-mock { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--radius); padding: 22px; align-self: center; }
.sec-mock-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--night-line); }
.sec-mock-top b { font-size: 17px; letter-spacing: -.01em; }
.sec-mock-top span, .sec-mock-note { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--night-muted); }
.sec-mock ul { list-style: none; margin: 0; padding: 0; }
.sec-mock li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--night-line); }
.sec-mock li span { display: grid; gap: 2px; min-width: 0; }
.sec-mock li b { font-size: 15px; font-weight: 600; }
.sec-mock li small { color: var(--night-muted); font-size: 13px; overflow-wrap: anywhere; }
.sec-mock li em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--night-muted); white-space: nowrap; }
.sec-mock i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.sec-mock i.bad { background: var(--pink); }
.sec-mock i.warn { background: var(--amber); }
.sec-mock-note { margin: 14px 0 0; }
.sec-honest { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: grid; gap: 14px; align-self: start; }
.sec-honest h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.sec-honest p { margin: 0; line-height: 1.6; }
.sec-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; background: var(--paper-2); border-radius: var(--radius); padding: 32px; }
.sec-report h2 { margin: 10px 0 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.15; }
.sec-report p { margin: 0; line-height: 1.65; }
@media (max-width: 800px) { .sec-report { grid-template-columns: 1fr; gap: 16px; padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .sec-mock, .sec-honest { transition: none; } }