/* Compendium detail entry ("codex") shell for every object kind.

   Loaded in the <head> of the Compendium browser, Tech Tree and Combat
   Simulator, and again from inside compendium/partials/detail.html so the
   Events pages that embed the same modal get it too (the second link is a
   cache hit). Every rule is scoped to .cmp-entry or to the modal window that
   directly contains one; the shared .compendium-* classes keep their look on
   the Events pages and in the Combat Simulator.

   Frame, stone band and close sprite are DS accents from ds_surfaces.css
   (.ps-ornate-frame, .ps-stone-band, .ps-close-lg). This file is layout. */

/* ---- Window geometry ----------------------------------------------------
   The canonical window is a two-row grid with its own border and fill. When
   it holds a codex entry, the entry owns the frame and both rows, and the
   window sizes to its content up to the viewport. */
.compendium-modal-window:has(> .cmp-entry) {
  grid-template-rows: minmax(0, 1fr);
  width: min(1132px, calc(100% - 2rem));
  height: -webkit-fit-content;
  height: fit-content;
  max-height: min(1000px, calc(100vh - 2rem));
  max-height: min(1000px, calc(100dvh - 2rem));
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  /* The carved border art has transparent pixels; keep the same stone
     surface behind them and the scrolling body's inset. */
  background: #171718;
}

.cmp-entry {
  --cmp-fill-cell: rgba(30, 31, 32, 0.88);
  --cmp-hairline: rgba(213, 177, 101, 0.18);
  --cmp-link-border: rgba(213, 177, 101, 0.34);
  --cmp-text-label: rgba(241, 228, 198, 0.8);
  --cmp-text-note: rgba(241, 228, 198, 0.62);
  --cmp-text-lede: rgba(241, 228, 198, 0.82);
  --cmp-text-prose: rgba(241, 228, 198, 0.9);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  color: var(--site-text);
  font-family: var(--site-font-body);
}

/* Neutral graphite surfaces. The DS frame and band default to navy, which
   clashed with the Compendium's warm stone; these compound selectors beat the
   variants' own values, so only this entry is recoloured. */
.cmp-entry.ps-ornate-frame--window {
  --ps-ornate-frame-fill: #171718;
  --ps-ornate-frame-inset: rgba(8, 8, 9, 0.85);
  background-clip: border-box;
}

.cmp-entry .cmp-entry-portrait.ps-ornate-frame {
  --ps-ornate-frame-fill: rgba(8, 8, 9, 0.66);
}

.cmp-entry .cmp-entry-bar.ps-stone-band {
  --ps-stone-band-fill: rgba(14, 14, 15, 0.82);
  --ps-stone-band-overlay: rgba(18, 18, 19, 0.7);
}

/* ---- Header band: Back, breadcrumb, Close ------------------------------ */
.cmp-entry-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 13px 24px;
}

.cmp-entry-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 6px;
  border: 1px solid transparent;
  border-radius: var(--site-radius-md);
  color: var(--site-gold-strong);
  background: transparent;
  cursor: pointer;
  font-family: var(--site-font-title);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.cmp-entry-back[hidden] {
  display: none;
}

.cmp-entry-back:is(:hover, :focus-visible) {
  border-color: rgba(213, 177, 101, 0.42);
  background-color: rgba(232, 196, 111, 0.08);
}

.cmp-entry-back-glyph {
  display: inline-grid;
  flex: none;
  width: 30px;
  height: 30px;
}

.cmp-entry-back-glyph > img {
  grid-area: 1 / 1;
  width: 30px;
  height: 30px;
  transition: opacity 160ms ease;
}

.cmp-entry-back-hover {
  opacity: 0;
}

.cmp-entry-back:is(:hover, :focus-visible) .cmp-entry-back-hover {
  opacity: 1;
}

/* compendium.js moves focus to the entry title (tabindex="-1") when the modal
   opens and after each in-modal navigation. The title is a landing point, not
   a control, so it draws no focus ring; Tab continues to the next control. */
.cmp-entry-title:focus {
  outline: none;
}

/* Narrow screens: once Back is revealed it keeps its chevron and 44px target
   but hides the word, so the breadcrumb keeps room for the kind crumb. The
   visually hidden label stays the button's accessible name. */
@media (max-width: 620px) {
  .cmp-entry-back {
    justify-content: center;
    min-width: 44px;
    padding: 6px;
  }

  .cmp-entry-back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.cmp-entry-crumbs {
  flex: 1 1 auto;
  min-width: 0;
}

.cmp-entry-crumbs ol {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--site-text-muted);
  font-size: 0.9375rem;
  line-height: 1.3;
  list-style: none;
}

.cmp-entry-crumb {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

/* The current name repeats the masthead title, so it gives way first. */
.cmp-entry-crumb--kind {
  flex: 0 1 auto;
}

.cmp-entry-crumb--current {
  flex: 0 100 auto;
  min-width: 4.5em;
}

.cmp-entry-crumb > a,
.cmp-entry-crumb > [aria-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-entry-crumb > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--site-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cmp-entry-crumb > a:hover {
  color: var(--site-text);
}

.cmp-entry-crumb > [aria-current] {
  color: var(--site-text);
}

.cmp-entry-crumb-sep {
  flex: none;
}

.cmp-entry-close {
  margin-left: auto;
}

/* ---- Scrolling body ---------------------------------------------------- */
.cmp-entry > .cmp-entry-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 30px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 30px 38px 32px;
}

/* ---- Masthead ---------------------------------------------------------- */
.cmp-entry-masthead {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  min-width: 0;
}

.cmp-entry-portrait {
  display: grid;
  flex: none;
  place-items: center;
  width: 196px;
  height: 196px;
}

.cmp-entry-portrait > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Non-unit icons are 64-128px art (seven major gods ship 64px round icons).
   A 148px frame leaves a 116px well, so nothing upscales past 2x. */
.cmp-entry:not(.cmp-entry--unit) .cmp-entry-portrait {
  --ps-ornate-frame-width: 16px;
  width: 148px;
  height: 148px;
}

.cmp-entry:not(.cmp-entry--unit) .cmp-entry-portrait > img {
  object-fit: contain;
}

.cmp-entry-masthead-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cmp-entry-eyebrow {
  margin: 0;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cmp-entry-title {
  margin: 0;
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.625rem);
  letter-spacing: 0.02em;
  line-height: 1;
  overflow-wrap: break-word;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.cmp-entry-lede {
  max-width: 720px;
  margin: 0;
  color: var(--cmp-text-lede);
  font-size: 1.25rem;
  line-height: 1.5;
}

.cmp-entry-summary {
  margin: 0;
  color: var(--site-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.cmp-entry .cmp-entry-badges {
  gap: 8px;
  margin: 2px 0 0;
}

.cmp-entry .cmp-entry-badges span {
  padding: 5px 10px;
  border: 1px solid var(--cmp-link-border);
  border-radius: var(--site-radius-sm);
  color: var(--site-gold);
  background: var(--cmp-fill-cell);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* ---- Section heading row (shared by later codex sections) ---------------
   <div class="cmp-entry-section-head"><h3>…</h3>
     <span class="cmp-entry-section-note">optional</span></div> */
.cmp-entry-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

.cmp-entry-section-head > h3 {
  flex: none;
  margin: 0;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cmp-entry-section-head::after {
  content: "";
  flex: 1 1 24px;
  order: 1;
  height: 1px;
  background: var(--site-border-strong);
}

.cmp-entry-section-note {
  flex: 0 1 auto;
  order: 2;
  color: var(--cmp-text-note);
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: right;
}

/* ---- Unit content (interim: restyled by later codex slices) ------------- */
.cmp-concept-copy p {
  margin: 0 0 1.1rem;
  line-height: 1.7;
  white-space: pre-line;
}

.cmp-concept-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ps-gold, #d9b96e);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.cmp-concept-link:hover,
.cmp-concept-link:focus-visible {
  color: #fff0bb;
}

.cmp-entry-content {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.cmp-entry .compendium-unit-stat-pair {
  margin-bottom: 0;
}

/* ---- Non-unit body ------------------------------------------------------
   Reference cards in the codex cell language and relationship rows in the
   "Continue" link language. Units keep compendium-unit-detail.css. */
.cmp-entry:not(.cmp-entry--unit) .compendium-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-detail-section {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  background: var(--cmp-fill-cell);
  box-shadow: inset 0 0 0 2px rgba(8, 8, 9, 0.8), inset 0 0 0 3px rgba(213, 177, 101, 0.22);
}

.cmp-entry:not(.cmp-entry--unit) .compendium-detail-section > h3 {
  margin: 0 0 8px;
  color: var(--site-text-muted);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-list {
  gap: 0;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cmp-hairline);
  font-size: 1rem;
}

/* Icon values (resource costs, linked entries) have no text baseline. */
.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row:has(.compendium-resource-value, .compendium-relation-chip) {
  align-items: center;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row dt {
  flex: none;
  max-width: 55%;
  color: var(--cmp-text-label);
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row dt[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--cmp-link-border);
  text-underline-offset: 4px;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--site-gold-strong);
  font-size: 1.125rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row:has(+ .is-total) {
  border-bottom-color: var(--site-border-strong);
}

.cmp-entry:not(.cmp-entry--unit) .compendium-stat-row.is-total dt {
  color: var(--site-gold);
}

/* Wide cards hold long lists (every pantheon, every major god, attack
   summaries): a label column with left-aligned values reads better there. */
.cmp-entry:not(.cmp-entry--unit) .compendium-detail-section.wide .compendium-stat-row {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
}

.cmp-entry:not(.cmp-entry--unit) .compendium-detail-section.wide .compendium-stat-row dt {
  max-width: none;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-detail-section.wide .compendium-stat-row dd {
  font-size: 1.0625rem;
  text-align: left;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-resource-value {
  gap: 8px;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-resource-value img {
  width: 26px;
  height: 26px;
}

.cmp-entry:not(.cmp-entry--unit) .cmp-entry-relation {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  align-items: start;
  gap: 12px 22px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--site-border-strong);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Level the label with the first row of 44px links, however many rows. */
.cmp-entry:not(.cmp-entry--unit) .cmp-entry-relation > h3 {
  margin: 0;
  padding-top: 15px;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-chip-row {
  gap: 10px;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-relation-chip {
  min-height: 44px;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--cmp-link-border);
  border-radius: var(--site-radius-md);
  color: var(--site-text);
  background: var(--cmp-fill-cell);
  font-family: var(--site-font-body);
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-relation-chip img {
  width: 30px;
  height: 30px;
}

.cmp-entry:not(.cmp-entry--unit) .compendium-relation-chip:is(:hover, :focus-visible) {
  border-color: var(--site-border-strong);
  color: var(--site-gold-strong);
  box-shadow: 0 0 24px rgba(225, 173, 76, 0.18);
  transform: translateY(-2px);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 760px) {
  /* Same fix as compendium-modal-responsive.css, which the Events pages do
     not load: drop the desktop centering transform and fill the viewport. */
  .compendium-modal-window:has(> .cmp-entry) {
    inset: 0.5rem;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: auto 0;
    transform: none;
  }

  .cmp-entry-bar {
    gap: 12px;
    padding: 10px 16px;
  }

  .cmp-entry > .cmp-entry-body {
    gap: 24px;
    padding: 22px 20px 24px;
  }

  .cmp-entry-masthead {
    flex-direction: column;
    gap: 18px;
  }

  .cmp-entry-portrait {
    width: 132px;
    height: 132px;
  }

  .cmp-entry:not(.cmp-entry--unit) .cmp-entry-portrait {
    --ps-ornate-frame-width: 10px;
    width: 112px;
    height: 112px;
  }

  .cmp-entry-lede {
    font-size: 1.125rem;
  }

  .cmp-entry:not(.cmp-entry--unit) .compendium-detail-grid,
  .cmp-entry:not(.cmp-entry--unit) .cmp-entry-relation {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-entry:not(.cmp-entry--unit) .cmp-entry-relation {
    gap: 10px;
  }

  .cmp-entry:not(.cmp-entry--unit) .cmp-entry-relation > h3 {
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .cmp-entry-bar {
    gap: 8px;
    padding: 6px 6px 6px 14px;
  }

  .cmp-entry-crumbs ol,
  .cmp-entry-crumb {
    gap: 6px;
  }

  .cmp-entry-crumbs ol {
    font-size: 0.875rem;
  }

  .cmp-entry > .cmp-entry-body {
    padding: 18px 14px 22px;
  }

  /* The frame is a hairline here (ds_surfaces.css); keep the art off it. */
  .cmp-entry-portrait {
    width: 120px;
    height: 120px;
    padding: 6px;
  }

  .cmp-entry:not(.cmp-entry--unit) .cmp-entry-portrait {
    width: 100px;
    height: 100px;
  }

  .cmp-entry:not(.cmp-entry--unit) .compendium-detail-section {
    padding: 16px;
  }

  .cmp-entry:not(.cmp-entry--unit) .compendium-detail-section.wide .compendium-stat-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-entry-back,
  .cmp-entry-back-glyph > img,
  .cmp-entry:not(.cmp-entry--unit) .compendium-relation-chip {
    transition: none;
  }

  .cmp-entry:not(.cmp-entry--unit) .compendium-relation-chip:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* ==== Unit masthead & history ============================================
   unit_masthead.html (summary, cost row, fact strip, availability sentence)
   and unit_history.html (Field notes card, lore with a drop cap, cited
   pull-quote). Layout plus the codex cell language used above; no shared
   .compendium-* class is restyled. Design reference: Papyrus Codex unit
   modal, masthead and History. */
.cmp-entry--unit {
  --cmp-text-caption: rgba(241, 228, 198, 0.6);
  --cmp-text-fact-label: rgba(241, 228, 198, 0.66);
  --cmp-text-availability: rgba(241, 228, 198, 0.68);
  --cmp-text-quote: #f8efdb;
  --cmp-fact-border: rgba(235, 199, 119, 0.72);
  --cmp-fact-rule: rgba(213, 177, 101, 0.28);
  --cmp-notes-fill: rgba(14, 14, 15, 0.6);
  --cmp-inset-ring: inset 0 0 0 2px rgba(8, 8, 9, 0.8), inset 0 0 0 3px rgba(213, 177, 101, 0.24);
}

/* ---- Cost row: resources, then the weighted total ---------------------- */
.cmp-entry-cost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 4px;
}

.cmp-entry-cost-label,
.cmp-entry-cost-total small {
  font-family: var(--site-font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.cmp-entry-cost-label {
  color: var(--cmp-text-caption);
}

.cmp-entry-cost-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-entry-cost-item,
.cmp-entry-cost-total {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.cmp-entry-cost-item > img,
.cmp-entry-cost-total > img {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cmp-entry-cost strong {
  color: var(--site-gold-strong);
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1;
}

/* A resource without an icon keeps its initial in a coin-sized ring. */
.cmp-entry-cost-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--site-border-strong);
  border-radius: 50%;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  line-height: 1;
}

.cmp-entry-cost-total {
  margin-left: 22px;
}

.cmp-entry-cost-total small {
  color: var(--site-gold);
}

/* ---- Fact strip: Category / Age / Trained at / Pantheon ----------------
   Cells without a value are left out, so the strip takes 1-4 equal
   columns; the 1px gap over the gold fill draws the separators. The column
   count follows the width of the masthead copy (not the viewport), which
   is what the cells actually share. */
.cmp-entry--unit .cmp-entry-masthead-copy {
  /* Size containment drops the content width, so the copy must fill the
     stacked (column) masthead instead of shrinking to fit. */
  align-self: stretch;
  container: cmp-masthead / inline-size;
}

.cmp-entry-facts {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 1px;
  margin: 8px 0 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--cmp-fact-border);
  border-radius: var(--site-radius-lg);
  background: var(--cmp-fact-rule);
  list-style: none;
}

.cmp-entry-facts:not(:has(> li)) {
  display: none;
}

/* A lone fact (a hero with no known age, trainer or pantheon) is a cell,
   not a banner across the masthead. */
.cmp-entry-facts:has(> li:only-child) {
  align-self: flex-start;
  min-width: min(100%, 12.5rem);
}

.cmp-entry-fact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 15px;
  background: var(--cmp-fill-cell);
  transition: background-color 180ms ease;
}

/* Pantheon emblems are taller than wide; nothing is cropped. */
.cmp-entry-fact-icon {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* A list of three or more (every trainer of a hero, every pantheon of a
   wild unit) gets two tracks while the strip is one row. */
.cmp-entry-fact.is-wide {
  grid-column: span 2;
}

.cmp-entry-fact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Labels are fixed short words; "Trained at" must not split in a 5-track row. */
.cmp-entry-fact-label {
  color: var(--cmp-text-fact-label);
  font-family: var(--site-font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmp-entry-fact-value {
  color: var(--site-text);
  font-size: 1.0625rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* Trained-at buildings open their own entry in place (same hx contract as
   the relation chips). One building stretches its target over the cell. */
.cmp-entry-fact-link {
  padding: 2px 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: left;
  transition: color 180ms ease;
}

/* The separating comma sits inside the button, after the underlined name,
   so it wraps with the name (a button is an atomic box); aria-hidden keeps
   it out of the button's accessible name. */
.cmp-entry-fact-name {
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 180ms ease;
}

.cmp-entry-fact-link:is(:hover, :focus-visible) {
  color: var(--site-gold-strong);
}

.cmp-entry-fact-link:is(:hover, :focus-visible) .cmp-entry-fact-name {
  text-decoration-color: currentColor;
}

.cmp-entry-fact.has-single-link .cmp-entry-fact-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cmp-entry-fact.has-single-link:has(.cmp-entry-fact-link:hover) {
  background-color: rgba(43, 43, 46, 0.92);
}

/* ---- Availability sentence and the total-value note --------------------- */
.cmp-entry-availability {
  margin: 0;
  color: var(--cmp-text-availability);
  font-size: 1rem;
  line-height: 1.6;
}

.cmp-entry-availability-name {
  color: var(--site-gold);
}

.cmp-entry-availability-sep {
  color: var(--cmp-text-caption);
}

/* ---- History ------------------------------------------------------------ */
.cmp-entry-history-body {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  min-width: 0;
}

.cmp-entry-notes {
  /* 300px of text plus padding and border, as in the design. */
  flex: 0 0 346px;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  background: var(--cmp-notes-fill);
  box-shadow: var(--cmp-inset-ring);
}

.cmp-entry-notes-title {
  margin: 0 0 14px;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cmp-entry-notes-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
}

.cmp-entry-note dt {
  color: var(--cmp-text-fact-label);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cmp-entry-note dd {
  margin: 2px 0 0;
  color: var(--site-text);
  font-size: 1.0625rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.cmp-entry-note dd.is-italic {
  color: var(--site-gold-strong);
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.35;
}

.cmp-entry-lore {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Without field notes the lore has the whole row; keep a readable measure. */
.cmp-entry-lore:only-child {
  max-width: 52rem;
}

.cmp-entry-lore > p {
  margin: 0;
  color: var(--cmp-text-prose);
  font-size: 1.1875rem;
  line-height: 1.68;
}

/* Drop cap on the first paragraph only. ::first-letter keeps the word whole
   for copy and screen readers. */
.cmp-entry-lore > p:first-child::first-letter {
  float: left;
  padding: 4px 12px 0 0;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 3.875rem;
  line-height: 0.82;
}

/* Pull-quote as designed: a 2px gold rule on the left edge of the quote
   (a typographic quotation mark, not a panel accent) over a soft radial
   backdrop; text stays left-aligned because some quotes run to 400+ chars. */
.cmp-entry-quote {
  margin: 0;
  padding: 20px 30px 16px 26px;
  border-left: 2px solid rgba(235, 199, 119, 0.6);
  background: radial-gradient(ellipse 86% 78% at 42% 52%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.12) 70%, rgba(0, 0, 0, 0) 84%);
}

.cmp-entry-quote blockquote {
  margin: 0;
  color: var(--cmp-text-quote);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}

.cmp-entry-quote figcaption {
  margin-top: 12px;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---- Unit masthead & history: responsive -------------------------------- */
@media (max-width: 900px) {
  .cmp-entry-history-body {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .cmp-entry-notes {
    flex: none;
  }

  /* The card is full width above the lore: let short notes sit side by side. */
  .cmp-entry-notes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 13px 28px;
  }

  .cmp-entry-lore:only-child {
    max-width: none;
  }
}

/* Below ~180px a cell cannot hold "Ranged Soldier" beside its icon: 2 x 2,
   with a lone last cell spanning the row so no gold gap shows. */
@container cmp-masthead (max-width: 720px) {
  .cmp-entry-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .cmp-entry-fact.is-wide {
    grid-column: auto;
  }

  .cmp-entry-fact:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* On a phone a long list (a hero's five trainers) in a half cell is a
   one-word column; such strips stack instead. */
@container cmp-masthead (max-width: 440px) {
  .cmp-entry-facts:has(> .is-wide) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .cmp-entry-cost-total {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .cmp-entry-fact {
    gap: 9px;
    padding: 11px 12px;
  }

  .cmp-entry-fact-icon {
    width: 26px;
    height: 26px;
  }

  .cmp-entry-notes {
    padding: 16px 18px;
  }

  .cmp-entry-lore > p {
    font-size: 1.0625rem;
    line-height: 1.62;
  }

  .cmp-entry-lore > p:first-child::first-letter {
    padding: 3px 9px 0 0;
    font-size: 3.125rem;
  }

  .cmp-entry-quote {
    padding: 16px 14px 14px 18px;
  }

  .cmp-entry-quote blockquote {
    font-size: 1.1875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-entry-fact,
  .cmp-entry-fact-link,
  .cmp-entry-fact-name {
    transition: none;
  }
}