/* wgf-entity-layout.css - the shared entity page anatomy (wgf_entity_layout.py, owner 2026-10-10).
 *
 * Header row, then MAIN (~70%) + SIDEBAR (~30%: Quick Facts, Downloads, In other versions, the
 * ad seam), then a TAB BAR of related lists. Full available width up to the header's 1640px
 * measure; the sidebar drops under main below 900px. Chrome is the existing window kit
 * (.wgf-window UIFrameMetal title band, .wgf-tab red-button tabs from wgf-chrome.css); this
 * sheet only lays them out. Contract: docs/standards/WIKI_PAGE_STANDARD.md §8.
 */

.wgf-ent {
  box-sizing: border-box;
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 max(12px, min(2vw, 18px));
}

/* An entity page uses the header's full measure, not the 1220px shell column (owner
   2026-10-10: the spell page used ~65% of a wide screen with an empty right side). */
main.wgf-shell-main:has(.wgf-ent) { max-width: 1680px; }
main.wgf-shell-main:has(.wgf-ent) .wgf-seo-breadcrumb { max-width: 1640px; }

/* ---- header row --------------------------------------------------------------------------- */
.wgf-ent__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 14px;
}
.wgf-ent__icon { flex: 0 0 auto; line-height: 0; }
.wgf-ent__titles { min-width: 0; }
.wgf-ent__type {
  margin: 0 0 2px;
  font-family: var(--font-game);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wgf-gold-dim, var(--wgf-gold));
}
.wgf-ent__name { margin: 0; }
/* A family hero inside the shell keeps its own look, minus the centred page measure. */
.wgf-ent > .wgf-seo-hero { max-width: none; margin-left: 0; margin-right: 0; }
.wgf-ent > .wgf-seo-hero .wgf-seo-hero__inner { max-width: none; margin-left: 0; }

/* ---- main + sidebar ----------------------------------------------------------------------- */
.wgf-ent__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: 18px 22px;
  align-items: start;
}
.wgf-ent__body--solo { grid-template-columns: minmax(0, 1fr); }
.wgf-ent__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wgf-ent__main > * { margin-top: 0; margin-bottom: 0; }
.wgf-ent__side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* The ad seam at the end of the sidebar: invisible until the shell drops a well in it. */
.wgf-ent__side > .wgf-seo-aside:empty { display: none; }
.wgf-ent__side > .wgf-seo-aside { position: static; }

@media (max-width: 899px) {
  .wgf-ent__body { grid-template-columns: minmax(0, 1fr); }
}

/* ---- sidebar boxes ------------------------------------------------------------------------ */
.wgf-ent-box .wgf-window__body { padding: 10px 14px 12px; }
.wgf-ent-qf { margin: 0; }
.wgf-ent-qf__row {
  display: grid;
  grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--wgf-gold-rgb), .10);
}
.wgf-ent-qf__row:last-child { border-bottom: 0; }
.wgf-ent-qf dt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--font-game);
  font-size: 13px;
  color: var(--wgf-gold);
}
.wgf-ent-qf dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--wgf-text);
  overflow-wrap: anywhere;
}
/* Small, flat, inline client icons: a label marker, not a button. */
.wgf-ent-qf__ico { flex: 0 0 18px; line-height: 0; }
.wgf-ent-qf__ico img,
.wgf-ent-qf__ico a img {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8);
}
.wgf-ent-qf__ico a { display: inline-block; line-height: 0; background: none; border: 0; padding: 0; }
.wgf-ent-qf__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--wgf-muted);
}
.wgf-ent-versions { list-style: none; margin: 0; padding: 0; }
.wgf-ent-versions li { padding: 5px 0; border-bottom: 1px solid rgba(var(--wgf-gold-rgb), .10); }
.wgf-ent-versions li:last-child { border-bottom: 0; }
.wgf-ent-box .wgf-wiki-downloads { margin: 0; padding-left: 18px; }

/* ---- label/value rows (any family's "details" table) --------------------------------------- */
table.wgf-ent-kv { width: 100%; table-layout: auto; margin: 0; }
table.wgf-ent-kv th,
table.wgf-ent-kv td { text-align: left; vertical-align: top; }
table.wgf-ent-kv th {
  width: 32%;
  min-width: 120px;
  white-space: nowrap;
  font-family: var(--font-game);
  font-weight: 400;
  color: var(--wgf-gold);
}
@media (max-width: 599px) {
  table.wgf-ent-kv th { white-space: normal; width: 40%; min-width: 0; }
}

/* ---- tab bar ------------------------------------------------------------------------------ */
.wgf-ent__tabs { margin-top: 22px; }
.wgf-ent__tabbar { display: flex; flex-wrap: wrap; gap: 4px; }
.wgf-ent__tabbar .wgf-tab { text-decoration: none; }
.wgf-ent__panels { padding: 14px 16px 16px; }
.wgf-ent__panel { scroll-margin-top: 170px; }
.wgf-ent__panel + .wgf-ent__panel { margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(var(--wgf-gold-rgb), .14); }
.wgf-ent__panelhead {
  margin: 0 0 10px;
  font-family: var(--font-game);
  font-size: 18px;
  color: var(--wgf-gold);
}
/* Enhanced (wgf-entity-layout.js): one panel at a time; the tab names it, so its head hides. */
.wgf-ent__tabs.is-tabbed .wgf-ent__panel[hidden] { display: none; }
.wgf-ent__tabs.is-tabbed .wgf-ent__panel + .wgf-ent__panel { margin-top: 0; padding-top: 0; border-top: 0; }
.wgf-ent__tabs.is-tabbed .wgf-ent__panelhead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* A fact summary inside a tab stays a compact list, never stretched across the full width. */
.wgf-ent__panel .wgf-ent-qf { max-width: 620px; margin-bottom: 12px; }
/* A window nested in a panel is a sub-section, not a second frame. */
.wgf-ent__panel .wgf-window { box-shadow: none; }
@media (max-width: 599px) {
  .wgf-ent__tabbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .wgf-ent__tabbar .wgf-tab { flex: 0 0 auto; }
  .wgf-ent__panels { padding: 12px 10px 14px; }
}