/* Canonical Compendium presentation over the separate authored Broken Gods
 * graph. The selector, profile, tiles, rail and modal deliberately use the
 * Compendium class contract; only coordinates, tracks and connector SVG stay
 * Event-specific. */
.bg-tree-layout { min-height: calc(100vh - 190px); }
.bg-tree-picker { align-self: start; }
.bg-tree-selector { flex-wrap: wrap; }
.bg-tree-selector-button { width: 68px; flex-basis: 68px; }
.bg-tree-selector-button span {
  min-height: 3.15em;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.bg-tree-panel { overflow: hidden; padding: .35rem; }
.bg-tree-scroller { max-width: 100%; overflow: auto; scrollbar-gutter: stable; }
.bg-tree-scroller:focus-visible { outline: 2px solid rgba(255, 224, 142, .72); outline-offset: 2px; }

.bg-tree-canvas.compendium-tree-board {
  --tree-major-width: 280px;
  --tree-age-height: 150px;
  --bg-choice-width: 292px;
  --bg-node-width: 48px;
  --bg-node-gap: 6px;
  position: relative;
  display: grid;
  grid-template-columns: var(--tree-major-width) max-content;
  width: max-content;
  min-width: 100%;
  padding: 0;
}
.bg-tree-major-profile { grid-column: 1; grid-row: 1; z-index: 2; min-height: calc(var(--tree-age-height) * 4); height: auto; }
.bg-tree-major-profile .compendium-tree-major-description { font-size: .69rem; }
.bg-tree-major-profile .compendium-tree-major-description p { margin: 0 0 .55rem; }
.bg-tree-major-profile .compendium-tree-major-description ul { margin: .28rem 0; padding-left: 1rem; }
.bg-tree-graph { grid-column: 2; z-index: 1; display: flex; flex-direction: column; position: relative; }
/* Choice/grant data has no authored X/Y position. Each age therefore gets a
 * fixed-height ancillary cell beside (never inside) its positioned graph.
 * The three cells share one 150px row, so choice content cannot alter node
 * coordinates, connector anchors, age markers or graph-band height. */
.bg-tree-age-row { display: grid; grid-template-columns: 76px var(--bg-choice-width) max-content; width: max-content; height: var(--tree-age-height); }
.bg-tree-age-marker { position: sticky; left: var(--tree-major-width); z-index: 1; width: 76px; height: var(--tree-age-height); min-height: var(--tree-age-height); }
.bg-tree-age { position: relative; display: grid; grid-template-columns: 1fr; width: max-content; height: var(--tree-age-height); min-height: var(--tree-age-height); overflow: hidden; border-left: 1px solid rgba(255,236,176,.06); background: var(--tree-row-bg, rgba(0,0,0,.12)); }
.bg-tree-age[data-bg-tree-age="archaic"], .bg-tree-age-marker[data-bg-tree-age-marker="archaic"] { --tree-row-bg: linear-gradient(180deg,rgba(219,157,93,.08),rgba(79,43,18,.1)); --tree-age-row-bg: rgba(150,104,50,.1); }
.bg-tree-age[data-bg-tree-age="classical"], .bg-tree-age-marker[data-bg-tree-age-marker="classical"] { --tree-row-bg: linear-gradient(180deg,rgba(197,205,219,.06),rgba(54,62,76,.09)); --tree-age-row-bg: rgba(142,149,165,.08); }
.bg-tree-age[data-bg-tree-age="heroic"], .bg-tree-age-marker[data-bg-tree-age-marker="heroic"] { --tree-row-bg: linear-gradient(180deg,rgba(233,194,101,.06),rgba(80,55,16,.09)); --tree-age-row-bg: rgba(175,136,47,.09); }
.bg-tree-age[data-bg-tree-age="mythic"], .bg-tree-age-marker[data-bg-tree-age-marker="mythic"] { --tree-row-bg: linear-gradient(180deg,rgba(118,106,214,.07),rgba(27,37,88,.1)); --tree-age-row-bg: rgba(78,74,150,.1); }
.bg-tree-choice-cell { display: grid; align-content: center; gap: 5px; width: var(--bg-choice-width); height: var(--tree-age-height); min-width: 0; overflow: hidden; padding: 7px 8px; border-left: 1px solid rgba(255,236,176,.06); background: var(--tree-row-bg, rgba(0,0,0,.12)); box-shadow: inset -1px 0 rgba(255,236,176,.06); }
.bg-tree-choice-label { color: var(--site-gold); font-size: .55rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.bg-tree-major-gifts { display: flex; align-items: center; gap: 4px; }
.bg-tree-choice-track { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 5px; min-height: 58px; }
.bg-tree-choice-track::after { position: absolute; z-index: -1; top: 50%; right: 3px; left: 38px; height: 1px; background: rgba(232,196,111,.22); content: ""; }
.bg-tree-choice-grants { display: flex; min-width: 0; gap: 3px; }
.bg-tree-age-grid { display: grid; grid-template-columns: repeat(var(--bg-tree-columns),var(--bg-node-width)); grid-auto-rows: var(--bg-node-width); gap: var(--bg-node-gap); align-items: start; padding: 7px; }
.bg-tree-canvas.compendium-tree-board .bg-tree-node { position: relative; width: var(--bg-node-width); min-width: var(--bg-node-width); height: var(--bg-node-width); min-height: var(--bg-node-width); padding: 2px; }
.bg-tree-node--node { grid-column: calc(var(--bg-node-x) + 1); grid-row: calc(var(--bg-node-y) + 1); }
.bg-tree-canvas.compendium-tree-board .bg-tree-node img { width: 30px; height: 30px; object-fit: contain; }
.bg-tree-node-badge { position: absolute; right: 1px; bottom: 1px; width: 6px; height: 6px; overflow: hidden; border: 1px solid rgba(5,10,18,.92); border-radius: 50%; background: var(--site-gold); color: transparent; }
.bg-tree-node--overlay .bg-tree-node-badge { background: var(--site-blue); }
.bg-tree-node--unresolved { border-style: dashed; opacity: .72; cursor: default; }
.bg-tree-node--unresolved .bg-tree-node-badge { background: rgba(255,255,255,.45); }
.bg-tree-canvas.compendium-tree-board .bg-tree-node--choice-head { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
.bg-tree-canvas.compendium-tree-board .bg-tree-node--choice-head img { width: 36px; height: 36px; }
.bg-tree-canvas.compendium-tree-board .bg-tree-node--choice-grant { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.bg-tree-canvas.compendium-tree-board .bg-tree-node--choice-grant img { width: 26px; height: 26px; }
.bg-tree-connectors { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bg-tree-connectors path { fill:none; stroke:rgba(232,196,111,.34); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }

/* Canonical detail panels fill the viewport because their content commonly
 * needs internal scrolling. Event-scoped variant details are deliberately
 * sparse, so let this one surface size to its content without changing the
 * canonical Compendium modal contract. */
.bg-tech-tree-page .compendium-modal-window.bg-tree-event-modal-window {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  height: auto;
  max-height: min(860px, calc(100vh - 2rem));
  transform: translate(-50%, -50%);
}

/* --- Narrow viewports ---------------------------------------------------
 * The Tech Tree is desktop-priority. On narrow screens the age rail stops
 * being a sticky side column and becomes a heading above its band, so the
 * band keeps its full authored width inside the scroller instead of forcing
 * the page body to scroll sideways.
 */
@media (max-width: 860px) {
  .bg-tree-canvas.compendium-tree-board { --tree-major-width: 228px; --bg-choice-width: 268px; }
  .bg-tree-major-profile { position: relative; left: auto; padding: .72rem; }
  .bg-tree-age-marker { position: relative; left: auto; }
  .bg-tree-major-profile .compendium-tree-major-portrait { height: 214px; }
  .bg-tree-canvas.compendium-tree-board .bg-tree-node { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
  /* The shared modal's narrow rule keeps its desktop centering transform;
   * clear that transform here so the Event-scoped detail panel stays inside
   * the mobile viewport. */
  .bg-tech-tree-page .compendium-modal-window { transform: none; }
}

@media (min-width: 981px) {
  .bg-tree-scroller { height: min(630px, calc(100vh - 270px)); }
}