.anomaly__grid { display: grid; gap: var(--gutter, 1rem);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.anomaly__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.anomaly__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anomaly__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .anomaly__grid--3, .anomaly__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .anomaly__grid--2, .anomaly__grid--3, .anomaly__grid--4 { grid-template-columns: minmax(0, 1fr); } }
.anomaly-card, .entity-card { display: block; background: var(--panel);
    border: calc(var(--border) * 1px) solid var(--ink); padding: 1rem; }
.anomaly__subtitle, .anomaly__when { color: var(--muted); }
.anomaly__summary { font-size: 1.1rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); }
.breadcrumb a::after { content: '/'; margin-left: .5rem; color: var(--muted); }
.breadcrumb a:last-child::after { content: ''; }
.spoiler { border: calc(var(--border) * 1px) solid var(--deep); margin: 1rem 0; }
.spoiler__summary { cursor: pointer; padding: .75rem 1rem; background: var(--panel);
    color: var(--ink); font-weight: 700; }
.spoiler[open] .spoiler__summary { border-bottom: calc(var(--border) * 1px) solid var(--deep); }
.spoiler > .prose { padding: 1rem; }
.anomaly-tree__item { margin-left: calc(var(--depth, 0) * 1.5rem); margin-bottom: 1rem; }
.relation-list { margin: 1.5rem 0; }
.relation-list__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.relation-list ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.relation-list li { padding: .25rem 0; }
.relation-list__note { color: var(--muted); }
.timeline { list-style: none; margin: 1rem 0 0; padding: 0; }
.timeline__row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: .25rem 1rem; padding: .75rem 0; border-top: calc(var(--border) * 1px) solid var(--line); }
.timeline__when { color: var(--muted); }
.timeline__type { color: var(--muted); grid-column: 2; }
.timeline__summary { grid-column: 2; margin: .25rem 0 0; }
.timeline__row .pill { grid-column: 2; justify-self: start; }
@media (max-width: 40rem) { .timeline__row { grid-template-columns: 1fr; }
    .timeline__type, .timeline__summary { grid-column: 1; } }

/*
 * A classification badge. The colour arrives as --badge-ink, set on the
 * element by the card and the case-file header; AnomalySchema::colourFor()
 * only ever yields '' or a six-digit hex, so nothing else can land here.
 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--badge-ink, var(--muted));
}
.anomaly__designation {
  margin: 0 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--muted);
}