/* Proposed entity-detail extension, scoped to its own stylesheet. */
.detail-summary { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
.detail-summary > :not(.detail-monster) { grid-column: 2; }
.detail-monster { grid-column: 1; grid-row: 1 / span 4; width: 144px; height: 144px; object-fit: contain; image-rendering: pixelated; align-self: center; }
.detail-table-wrap { margin-top: var(--s-5); border: var(--border-standard) solid var(--line-strong); border-radius: var(--r-md); }
.detail-table { table-layout: fixed; }
.detail-table th, .detail-table td { overflow-wrap: anywhere; }
.detail-table thead th { white-space: normal; letter-spacing: .03em; }
.detail-table th:first-child { width: 9%; }
.detail-field-label { display: none; }
@media (max-width: 768px) {
  .detail-summary { display: block; }
  .detail-monster { display: block; width: 96px; height: 96px; margin: 0 0 var(--s-4); }
  .detail-table-wrap { border: 0; }
  .detail-table, .detail-table tbody { display: block; width: 100%; }
  .detail-table caption { display: block; text-align: left; }
  .detail-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .detail-table tbody tr { display: block; margin-top: var(--s-3); border: var(--border-standard) solid var(--line-strong); border-radius: var(--r-md); }
  .detail-table tbody th, .detail-table tbody td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); width: auto; align-items: start; }
  .detail-table tbody th:first-child { width: auto; }
  .detail-table tbody th { background: var(--paper-deep); }
  .detail-table tbody tr:last-child th, .detail-table tbody tr:last-child td { border-bottom: 1px solid var(--line-soft); }
  .detail-table tbody tr td:last-child { border-bottom: 0; }
  .detail-field-label { display: block; font-weight: 600; color: var(--ink-muted); }
}
