/* Restore the existing character components from the template and song detail labels from songs.html. */
.character-table-wrap {
  overflow-x: auto;
  border: 2px solid #f8d4e6;
  border-radius: 14px;
  background: #fff;
}

.character-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  table-layout: fixed;
}

.character-table th:nth-child(1),
.character-table td:nth-child(1) { width: 46%; }

.character-table th:nth-child(2),
.character-table td:nth-child(2) { width: 54%; }

.character-table thead th {
  padding: 0;
  background: #fff0f7;
  border-bottom: 2px solid #f8d4e6;
  text-align: left;
}

.character-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid #f7e3ed;
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.character-table tbody tr:last-child td {
  border-bottom: 0;
}

.character-sort-icon {
  color: var(--accent);
  font-size: 0.82rem;
}

.character-name-cell {
  color: var(--accent);
}

.character-name-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 900;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.character-name-static {
  display: inline-block;
  max-width: 100%;
  color: var(--accent);
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.character-name-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.character-name-button:hover,
.character-name-button:focus-visible {
  color: var(--brand);
  text-decoration: underline;
  outline: none;
}

.character-open-icon {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 0.76rem;
  text-decoration: none;
}

.character-detail-cell {
  padding: 0 !important;
  background: #fffafc !important;
}

.character-detail-cell .character-detail {
  padding: 10px;
}

.character-list {
  display: grid;
  gap: 8px;
}

.character-card {
  border: 2px solid #f8d4e6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.character-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.character-card-summary::-webkit-details-marker {
  display: none;
}

.character-card-name-cell {
  min-width: 0;
}

.character-card-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 1.55rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff0f7;
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.songs-detail-list {
      margin: 0;
      display: grid;
      gap: 8px;
    }

.songs-detail-item {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

.songs-detail-item dt,
    .songs-detail-item dd {
      margin: 0;
    }

.songs-detail-item dt {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-muted);
    }

/* Birthday rows contain date, name, and unit/agency rather than the template two-column list. */
.character-table th:nth-child(1), .character-table td:nth-child(1) { width: 15%; }
.character-table th:nth-child(2), .character-table td:nth-child(2) { width: 30%; }
.character-table th:nth-child(3), .character-table td:nth-child(3) { width: 55%; }
.character-table thead th { padding: 9px 10px; color: var(--accent); }
.character-date-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.character-card-name-cell .character-date-cell { display: block; margin-bottom: 4px; }
.character-card-value { white-space: normal; overflow-wrap: anywhere; }

/* Keep five-character profile labels together in the existing label/value columns. */
.songs-detail-item { grid-template-columns: 72px minmax(0, 1fr); }