/* Portrait selection and full-body inspection are separate, reusable art slots. */
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-card.codex-v20-card {
  display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center;
  gap:16px; padding:16px; min-width:0; min-height:148px; text-align:start;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-card .codex-v17-card-copy {
  min-height:0; gap:6px;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-art-host {
  display:block; position:relative; min-width:0; width:100%; height:auto;
  margin:0; padding:0; transform:none; background:none; border:0;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-art-host::before {
  content:none;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait {
  position:relative; isolation:isolate; display:block; width:88px; height:88px;
  overflow:hidden; box-sizing:border-box; border:1px solid #b69a62;
  border-radius:5px; background:#132321;
  box-shadow:0 0 0 3px #061210,0 0 0 4px #80684555,inset 0 1px 2px #050b09;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait::after {
  content:""; position:absolute; inset:3px; z-index:2; pointer-events:none;
  border:1px solid #ddc39135; border-radius:2px;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait > picture,
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait .codex-v20-image {
  display:block; width:100%; max-width:none; height:100%; margin:0; padding:0;
  object-fit:cover; object-position:50% 25%; filter:none;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait > .codex-v20-head-focus {
  position:absolute; width:var(--codex-v20-portrait-scale); max-width:none;
  height:auto; left:calc(50% - var(--codex-v20-portrait-left));
  top:calc(50% - var(--codex-v20-portrait-top));
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait > picture.codex-v20-head-focus .codex-v20-image {
  width:100%; height:auto; object-fit:fill;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-atlas-tile {
  display:block; position:relative; overflow:hidden;
  aspect-ratio:var(--codex-v20-aspect); flex:none; box-sizing:content-box;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-aspect {
  display:block; width:100%; height:0;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-atlas-tile .codex-v20-atlas-image {
  position:absolute; display:block; max-width:none; max-height:none;
  margin:0; padding:0; object-fit:fill; filter:none;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero {
  display:grid; grid-template-columns:minmax(190px,.85fr) minmax(0,1fr);
  align-items:center; gap:28px; padding:20px; min-height:0;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v20-art-host {
  grid-column:1; grid-row:1/span 2;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v17-detail-heading {
  grid-column:2; grid-row:1; align-self:end;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero-meta {
  display:grid; grid-column:2; grid-row:2; align-self:start;
  min-width:0; gap:12px; color:#bbc9c7;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero-meta > p {
  margin:0; line-height:1.6;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody {
  --codex-v20-zone-height:420px;
  position:relative; display:grid; place-items:start center; box-sizing:border-box;
  width:100%; height:420px; height:var(--codex-v20-zone-height); min-width:0; padding:16px;
  overflow:visible; isolation:isolate; background:#0c1a1899;
  border:1px solid #b8a06f30; border-radius:5px;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody > picture,
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody .codex-v20-image {
  display:block; width:100%; max-width:100%; height:100%; max-height:100%;
  min-width:0; min-height:0; object-fit:contain; object-position:center top;
  filter:drop-shadow(0 10px 9px #030a08aa); transform:none; margin:0;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody > .codex-v20-atlas-tile {
  width:100%; width:min(100%,calc((var(--codex-v20-zone-height) - 34px) * var(--codex-v20-aspect)));
  max-height:100%; filter:drop-shadow(0 10px 9px #030a08aa);
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-placeholder {
  display:block; width:62%; height:70%; max-width:150px; margin:auto;
  color:#a28c60; opacity:.7;
}
body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody.is-missing .codex-v20-placeholder {
  width:45%; height:50%;
}
@media(max-width:699px) {
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v17-hub {
    padding:10px 12px; gap:0; margin-bottom:6px;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v17-hub-heading h3 {
    margin:0; font-size:20px;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v17-hub .codex-v17-eyebrow,
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v17-hub .codex-v17-summaries {
    display:none;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v17-content > .codex-v17-progress {
    padding:6px 2px;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v20-card .codex-v17-tags > .codex-v17-tag:last-child {
    display:none;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero {
    grid-template-columns:minmax(0,1fr); align-items:start; padding:14px;
    gap:18px;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody {
    height:240px;
    --codex-v20-zone-height:clamp(180px,calc(100dvh - 344px),360px);
    height:var(--codex-v20-zone-height);
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v17-detail-heading {
    grid-column:1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:8px 12px; align-items:start;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v17-detail-heading > .codex-v17-eyebrow {
    display:none;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v17-detail-heading > h3 {
    grid-column:1; grid-row:1; min-width:0; overflow-wrap:anywhere;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v17-detail-heading > .codex-v17-status {
    grid-column:2; grid-row:1; margin:4px 0 0; align-self:start;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero > .codex-v20-art-host {
    grid-column:1; grid-row:2;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero-meta {
    grid-column:1; grid-row:3;
  }
}
@media(max-width:359px) {
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-card.codex-v20-card {
    grid-template-columns:72px minmax(0,1fr); padding:12px; gap:12px;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-portrait {
    width:72px; height:72px;
  }
}
@media(max-height:480px) and (min-width:700px) {
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-fullbody {
    height:340px; --codex-v20-zone-height:340px;
  }
  body #detail-dialog#detail-dialog[data-codex-art-v20] .codex-v20-hero {
    grid-template-columns:minmax(180px,.65fr) minmax(0,1fr);
  }
}