/* The game tree page (/<slug>/tree): layout only, on the design-system tokens and components (/shared/cv-tokens.css,
   /shared/cv-components.css: .cv-tree-head, .cv-fruit-list, .cv-fruit-row, .cv-tag--badge, .cv-stat--inline,
   .cv-rank-empty--inset, .cv-fruit-card, .cv-toast). Nothing here applies outside body.cv-tp.
   Wide screens: the tree in its window on the left, the fruit list beside it, the same height; only the list scrolls.
   Under 900px: one column, the list under the tree in a bounded panel. The tree inside #tree is the site's own
   (shared/tree-grow.js, shared/card.css), drawn exactly as before. */

* { box-sizing: border-box; }

.cv-tp {
  --tp-gap: var(--space-5);   /* tree window to list (tree-page.js GAP) */
  --tp-panel: 400px;          /* tree-page.js sets it from the window width */
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-body);
  font-variant-numeric: tabular-nums lining-nums;
}
.cv-tp ::selection { background: var(--color-primary); color: var(--color-on-primary); }
.cv-tp [hidden] { display: none !important; }

.cv-tp__head { padding: var(--space-4) var(--space-gutter); }

.cv-tp__body {
  display: grid;
  grid-template-columns: var(--stage-size, 640px) var(--tp-panel);
  gap: var(--tp-gap);
  justify-content: center;
  align-items: start;
  padding: 0 var(--space-gutter) var(--space-6);
}
.cv-tp__tree-col { position: relative; min-width: 0; }

/* the tree window: the site's tree plot, unchanged (square, 1px soft line, radius 20 from /shared/tokens.css) */
.cv-tp__stage {
  aspect-ratio: 1 / 1;
  width: var(--stage-size, 100%);
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
}
.cv-tp .tree-host { position: relative; isolation: isolate; }
.cv-tp .tree-host > svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* fallback colours only, as site.css: tree-style.js adopts the renderer's own sheet, which wins */
.cv-tp .tree-host svg .w { fill: none; stroke: var(--t1); stroke-linecap: round; stroke-linejoin: round; }
.cv-tp .tree-host svg .b { stroke: var(--t0); }
.cv-tp .tree-host svg .m { stroke: var(--t1); }
.cv-tp .tree-host svg .l { fill: var(--t2); }
.cv-tp .tree-host svg .f { fill: var(--t3); }
.cv-tp .tree-host svg .h { fill: var(--t4); }

/* the fruit list beside it: as tall as the tree window */
.cv-tp__panel { height: var(--stage-size, auto); }

/* ---- narrow (under 900px): one column. The tree window first, the list under it; the list scrolls inside a
   bounded panel so the page never grows by thirty rows ---- */
@media (max-width: 899px) {
  .cv-tp__body { grid-template-columns: minmax(0, var(--stage-size, 100%)); gap: var(--space-5); }
  .cv-tp__panel { height: auto; max-height: min(70vh, 640px); }
  .cv-tp__panel.is-short { max-height: none; }
}