/* Incident case studies (/incidents and /incidents/<slug>), on top of guides.css and the docs layout in marketing.css.
   Written by hand; the Astro pages in site/src/pages/incidents use it. */
.incident-verdict { display: grid; gap: 10px; margin: 18px 0 0; padding: 0 !important; list-style: none; }
.site .incident-verdict li { display: grid; grid-template-columns: 11rem 8rem minmax(0, 1fr); gap: 4px 14px; align-items: baseline; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-control); background: #ffffff04; }
.site .incident-verdict p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.incident-feature { font-weight: 600; color: var(--text); }
.incident-outcome, .incident-pills li { justify-self: start; max-inline-size: 100%; padding: 2px 10px; border-radius: 99px; font: 600 12px/1.45 var(--mono); letter-spacing: .02em; white-space: normal; overflow-wrap: anywhere; }
.is-block .incident-outcome, .incident-pills .is-block { background: #6ee7a826; color: #8ff0bd; }
.is-show .incident-outcome, .incident-pills .is-show { background: #66b3fa26; color: #9fd3ff; }
.is-limited .incident-outcome, .incident-pills .is-limited { background: #f5c26b24; color: #f5cf8a; }
.is-none .incident-outcome, .incident-pills .is-none { background: #ffffff10; color: var(--text-3); }

.incident-timeline { margin: 18px 0 0; padding: 0 !important; list-style: none; border-inline-start: 2px solid #b096fa40; }
.site .incident-timeline li { position: relative; margin: 0; padding-block: 0 16px; padding-inline: 22px 0; }
.incident-timeline li:before { content: ""; position: absolute; inset-inline-start: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #b096fa; }
.incident-timeline .when { display: block; font: 600 13px var(--mono); color: #9fd3ff; }
.site .incident-timeline p { margin: 4px 0 0; }

.incident-iocs td:first-child { width: 30%; }
.incident-iocs td:nth-child(2), .incident-iocs td:nth-child(3) { width: 15%; }
.incident-iocs code { font-size: 13px; overflow-wrap: anywhere; }
.site .incident-features { margin: 14px 0 0; }
.site .incident-features li + li { margin-top: 12px; }

.incident-cta { margin-top: 56px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #b096fa12, #ffffff03); }
.site .incident-cta p { max-width: 60ch; }

/* Hub */
.site .incident-rules ul { max-width: 64ch; margin-top: 18px; padding-inline-start: 20px; list-style: disc; }
.site .incident-rules li { color: var(--text-2); }
.site .incident-rules li + li { margin-top: 10px; }
.incident-rules li::marker { color: #b096fa; }
.incident-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.site .incident-card .incident-when { font: 600 13px var(--mono); color: #9fd3ff; }
.incident-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0 !important; list-style: none; }
.site .incident-pills li { margin: 0; padding: 2px 10px; font: 500 12px/1.6 var(--mono); }

@media (max-width: 820px) {
  .site .incident-verdict li { grid-template-columns: minmax(0, 1fr) auto; }
  .site .incident-verdict p { grid-column: 1 / -1; }
  .incident-grid { grid-template-columns: minmax(0, 1fr); }
  .incident-iocs td:before { content: attr(data-label) ": "; font: 600 12px var(--mono); color: var(--text-3); }
  .incident-iocs td:first-child:before { content: none; }
  .incident-cta { padding: 20px; }
}