.initial-record-list {
  display: grid;
  gap: 12px;
}

.initial-record {
  min-width: 0;
  overflow-wrap: anywhere;
}

.initial-record summary,
.initial-record-summary {
  padding: 12px 16px;
}

.initial-record summary {
  min-height: 44px;
  cursor: pointer;
}

.initial-record summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.initial-record-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 0.9em;
}

.initial-record .character-detail {
  padding: 12px 16px;
}

@media (max-width: 850px) {
  .initial-title-list {
    display: grid;
    gap: 8px;
  }

  .initial-title-list .title-select-card {
    display: block;
    min-width: 0;
    padding: 12px;
    border: 2px solid var(--brand-light);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .initial-title-list .title-select-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .initial-title-list .title-select-card-title {
    display: block;
    color: var(--accent);
    font-weight: 900;
  }

  .initial-title-list .title-select-card-meta {
    display: block;
    margin-top: 6px;
    color: var(--brand);
    font-size: 0.85em;
  }
}