/* Initial HTML stays readable when the list data or application cannot load. */
.static-list-cards { display: none; }
.static-row-details > summary {
  padding: 6px 10px;
  color: var(--brand);
  cursor: pointer;
  font-weight: 700;
}
.static-card-summary { list-style: none; cursor: pointer; }
.static-card-summary::-webkit-details-marker { display: none; }
.static-card-summary:focus-visible,
.static-row-details > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.static-list-cards .character-card[open] { background: #fffafc; }
.static-list-cards .character-card[open] .character-open-icon { transform: rotate(180deg); }
.static-list-cards .character-card-name-cell { display: flex; gap: 5px; align-items: center; }
.static-list-cards .character-card-meta { display: flex; }
@media (max-width: 850px) {
  .static-list-table { display: none; }
  .static-list-cards { display: grid; }
}