/* ============================================================================
   aReS — repairs for running inside a site shell
   ============================================================================
   Loaded only by the mounting host. On its own host the app IS the page: it
   owns the window, body is a full-height flex column, and nothing above it
   competes for space. Mounted, two of those assumptions stop holding, and
   both have cost a day somewhere in this repo already (ARCHITECTURE §13).

   Nothing host-specific belongs here — no console rules, no page widths. This
   is the app adapting to being one block among several, and any host that
   mounts it needs exactly these repairs.
   ========================================================================= */

/* 1 — THE APP NO LONGER OWNS THE WINDOW.
   app.css puts height:100vh and overflow:hidden on .ares, which is correct
   where the app is the whole page and wrong here: it would pin a block inside
   a scrolling document to the viewport and clip whatever did not fit. The
   page scrolls; the app is as tall as it needs to be. */
#npb-app .ares{height:auto;overflow:visible}

/* 2 — NO PANEL, NO SECOND GROUND.
   NPB 3D runs full-bleed and an app in a bordered box reads as a widget
   embedded in a document rather than as the thing the page is for. The
   canvas paints its own ground from --chart-bg, and the header, filter bar
   and ranking column carry theirs, so the root needs none. */
#npb-app .ares{background:transparent}

/* 3 — flex:1 RESOLVES TO ZERO HERE, AND THAT IS THE TRAP THAT ATE A DAY.
   .main is flex:1 inside the app's full-height column. Outside one there is
   no definite height to take a share of, so it computes to 0 — and the chart
   canvas inside it reports a width, draws nothing, and raises no error. A
   mounting host owes it a height.

   Viewport-relative rather than calc(100vh - chrome): the Top Gear port
   subtracted the site chrome, forgot the page heading above the app, and put
   a horizontal scrollbar 102px below the fold. Capped in pixels so the chart
   does not become a letterbox on a tall monitor, floored so it stays a chart
   on a short one. */
#npb-app .ares .main{flex:0 0 auto;height:min(64vh,660px);min-height:360px}

/* THE flex:0 0 auto IS THE WHOLE FIX, AND A HEIGHT ALONE WAS NOT ONE.
   .main is a flex item of .ares, and app.css gives it `flex:1` — which is
   `flex-grow:1; flex-shrink:1; flex-basis:0%`. **A flex-basis beats `height`
   for an item's main size**, so the height above was matched, parsed, and
   then ignored: the item sized to its content instead. With the asset filter
   on its default five rows the content was short and the layout looked
   right; with the filter off, 282 rows in the ranking column made the app
   6,424px tall inside a 900px window, and the chart with it.

   Nothing errored, and the first version of the check could not see it
   either — that check asserted the chart region had SOME height, which a
   6,300px one does. Setting an explicit height on a flex item means taking
   it out of the flex sizing first. */

/* 4 — ONE FACE, AND ITS FIGURES LINE UP.
   The mono face is Corporate S here (tokens.css, the sentinelled line is the
   other host's). Corporate S is proportional, so every column of numbers in
   the ranking panel and the header stats needs tabular figures asked for
   explicitly — CLAUDE.md's rule for every numeric column on this site. */
#npb-app .ares .header-stats,
#npb-app .ares .rank-list,
#npb-app .ares .tooltip{font-variant-numeric:tabular-nums}

/* 5 — NARROW VIEWPORTS.
   The app is a chart beside a 280px ranking column, which is a horizontal
   overflow below about 900px. Stack them instead, and give each a height of
   its own — the row's height cannot simply be inherited once it is a column.
   `screen and` is not decoration: print evaluates width queries against the
   page box, and an unqualified max-width query collapsed a two-column
   factsheet in print on 04.09 (§9, and again in §20). */
@media screen and (max-width:900px){
  #npb-app .ares .main{flex-direction:column;height:auto}
  #npb-app .ares .chart-wrap{height:min(52vh,480px);min-height:280px}
  #npb-app .ares .rank-panel{width:auto;border-left:none;border-top:1px solid var(--border);max-height:44vh}
}