/* An NPC's or an object's page (entity.html, partials/entity_body.html): the details beside the 3D
 * model, the spawn map, and the related tables and their tabs.
 *
 * Its own file, loaded only by those pages, rather than pq.css: pq.css is the design system the
 * companion windows embed byte for byte.  Colours go through the site's custom properties with
 * fallbacks; the 3D model's frame and canvas are pq.css's .look-model, shared with the character
 * sheet.
 */

.entity-tag { margin: -0.2rem 0 0.35rem; color: var(--text-dim, #a2afc5); }

/* Details on the left, the model on the right; one column on a phone. */
.entity-top { display: grid; gap: 1rem; margin-top: 1rem; }
.entity-top > .card { margin: 0; }
@media (min-width: 760px) {
  .entity-top.has-figure { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: start; }
}

/* The model: the still picture is the frame, the viewer's canvas lies over it once drawn. */
.npc-figure h2 { margin-bottom: 0.5rem; }
.npc-model { aspect-ratio: 6 / 7; max-width: 340px; margin: 0 auto; }
.npc-model-still {
  display: block; width: 100%; height: 100%; object-fit: contain;
  border: 1px solid var(--border, #1d2739); border-radius: var(--radius, 8px);
  background: var(--bg-inset, #0b111c);
}
.npc-model-still.is-absent { min-height: 220px; }
.npc-model-controls { flex-wrap: wrap; justify-content: flex-end; }
.npc-model-empty {
  display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 1rem;
  border: 1px dashed var(--border, #1d2739); border-radius: var(--radius, 8px); text-align: center;
}
.npc-model-empty p { margin: 0; max-width: 26ch; }
/* While the model is on its way the box already has the model's shape, so nothing moves when it lands. */
.npc-model-empty.is-building, .npc-model-empty.is-waiting { aspect-ratio: 6 / 7; max-width: 340px; margin: 0 auto; }
/* An invisible helper: nothing to show, said quietly. */
.npc-model-empty.is-invisible, .npc-model-empty.is-none { color: var(--text-dim, #a2afc5); background: var(--bg-inset, #0b111c); }
@media (prefers-reduced-motion: no-preference) {
  .npc-model-empty .is-building::after { content: " \2026"; animation: entity-wait 1.6s steps(4) infinite; }
}
@keyframes entity-wait { from { opacity: 0.2; } to { opacity: 1; } }

/* Where it is. */
.found-in { margin: 0 0 0.6rem; }
.found-in a[aria-current="true"] { font-weight: 600; text-decoration-thickness: 2px; }
.spawn-tools { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin: 0 0 0.6rem; }
.spawn-tools[hidden], .spawn-floors[hidden] { display: none; }
.spawn-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.spawn-place + .spawn-place { margin-top: 1rem; }
.spawn-place-name { margin: 0 0 0.4rem; font-size: 1rem; }
.spawn-floors { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; }
.spawn-floor-name { margin: 0.25rem 0; font-size: 0.92rem; color: var(--text-dim, #a2afc5); }
.spawn-coords { margin: 0.4rem 0 0.2rem; }
.spawn-coords p { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.entity-where .map-figure { margin: 0; }
/* The map is a compact card with its words beside it (2026-10-25: "rather a small map, which can be
 * zoomed, moved and opened larger"); one column on a phone, where the map takes the width. */
.spawn-floor { display: grid; gap: 0.4rem 1rem; }
.spawn-floor > .spawn-floor-name { margin-bottom: 0; }
.spawn-map { min-width: 0; max-width: 460px; }
.spawn-side { min-width: 0; }
.spawn-side .spawn-coords { margin-top: 0; }
.spawn-map-help { font-size: 0.82rem; }
@media (min-width: 760px) {
  .spawn-floor { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: start; }
  .spawn-floor > .spawn-floor-name { grid-column: 1 / -1; }
}

/* Related: the tabs and their tables. */
.rel-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.75rem; border-bottom: 1px solid var(--border, #1d2739); }
.rel-tabs[hidden] { display: none; }
.rel-tab {
  padding: 0.35rem 0.75rem; border: 1px solid transparent; border-bottom: none;
  border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
  background: none; color: var(--text-dim, #a2afc5); font: inherit; cursor: pointer;
}
.rel-tab[aria-selected="true"] {
  color: var(--text, #e7e9f2); border-color: var(--border, #1d2739);
  background: var(--bg-raised, #101725); margin-bottom: -1px;
}
.rel-tab:focus-visible { outline: 2px solid var(--accent, #6fd18c); outline-offset: 2px; }
.rel-panel + .rel-panel { margin-top: 1rem; }
.entity-related.is-tabbed .rel-panel + .rel-panel { margin-top: 0; }
.entity-related.is-tabbed .rel-panel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table-wrap { overflow-x: auto; }
.rel-table td.num, .rel-table th.num { text-align: right; padding-right: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-table th.is-sortable { cursor: pointer; user-select: none; }
.rel-table th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 0.7em; }
.rel-table th[aria-sort="descending"]::after { content: " \25BC"; font-size: 0.7em; }
.rel-item-inner { display: flex; align-items: center; gap: 0.45rem; }
.rel-icon {
  flex: none; width: 22px; height: 22px; border-radius: 3px;
  border: 1px solid var(--border-strong, #2d3b54); background: var(--bg-inset, #0b111c);
}
.rel-icon.is-placeholder { display: inline-block; }