/* Native fallback inside the existing list/card shell; browser enhancement replaces it. */
.initial-list > .character-card[open] { background: #fffafc; }
.initial-list > .character-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.initial-list .character-open-icon::before { content: "▼"; }
.initial-list details[open] > summary .character-open-icon::before { content: "▲"; }
.initial-list .initial-value { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.initial-list .initial-field-label { color: var(--text-muted); font-size: .8rem; }
.initial-list .character-name-text { white-space: normal; overflow-wrap: anywhere; }
.initial-list .character-card-summary { align-items: start; }
.initial-list .character-detail { padding: 8px 12px 12px; }
@media (min-width: 851px) {
  .initial-list .character-card-summary { grid-template-columns: var(--initial-columns, minmax(0, 34fr) repeat(3, minmax(0, 22fr))); align-items: start; }
}
@media (max-width: 850px) {
  .initial-list .character-card-summary--with-value { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .initial-list .initial-value-1, .initial-list .initial-value-2 { grid-column: 1 / -1; }
  .title-select-list { display: grid; gap: 8px; }
  .title-select-card { display: grid; gap: 6px; padding: 10px; border: 2px solid var(--brand-light); border-radius: 14px; color: inherit; text-decoration: none; }
  .title-select-card-title { color: var(--accent); font-weight: 900; overflow-wrap: anywhere; }
  .title-select-card-meta { font-size: .9rem; }
}