/* viewer-extra.css — piece-specific layout overrides beyond viewer-chrome.css. */
:root {
  --cv-canvas-min-width: 320px;
  /* Floor for the ages table's scroll box: what it measured before it was made
     to fill the column, so the change can only ever add rows, never remove them. */
  --cv-ages-table-min-height: 260px;
  /* engine.js reads these via cssVarPx(); layout literals must not live in JS
     (viewer-token-policy.yml universal.engine forbids them). */
  --cv-canvas-min-height: 430px;
  --cv-canvas-max-height: 640px;
  --cv-canvas-aspect: 320 / 430;
}

/* Panel left, figure right — same geometry contract as demographic-flux's
   viewer-extra.css. The container fills the iframe and the canvas fills the
   space beside the sidebar; the CARO extension's content band is what fixes
   the size (a constant 990px whatever the window width), so nothing here
   hard-codes a width. A fixed px width larger than that band puts the whole
   visual inside a nested horizontal scrollbar at every window size. */
body {
  min-height: auto;
}

.container {
  width: 100%;
  max-width: 100%;
}

.sidebar {
  max-height: none;
}

.canvas-area {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

/* Flux puts #canvas-container directly inside .canvas-area; this piece wraps
   the canvas, identity line and ages table in one block. As a flex item that
   wrapper shrink-to-fits the canvas's intrinsic size instead of filling the
   column, so the canvas comes out narrower than the space beside the sidebar. */
.canvas-area > div {
  width: 100%;
  min-width: 0;
}

/* Live-readout chrome, mirroring demographic-flux's viewer-extra.css so the two
   viewers present live numbers the same way: a framed position readout above a
   panel of boxed statistic badges, rather than unboxed rows. Tints come from
   color-mix() over --cv-* tokens (viewer-token-policy.yml extra_css forbids
   hardcoded rgba here). */
.front-readout {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--cv-bg);
  color: var(--cv-secondary);
  border: 1px solid var(--cv-border);
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
}

.front-readout .age-value {
  color: var(--cv-ink);
  font-weight: 600;
}

.stat-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: max-content;
  padding: 12px;
  background: color-mix(in srgb, var(--cv-border) 22%, var(--cv-bg));
  border: 1px solid var(--cv-border);
  border-radius: 6px;
}

.stat-badge {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 5px;
  padding: 10px 12px;
  border: 1px solid var(--cv-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cv-ink) 4%, transparent);
}

.stat-badge .stat-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--cv-secondary);
  line-height: 1.35;
}

.stat-badge .stat-value {
  margin-top: 4px;
  line-height: 1.3;
}

/* The denominator both running totals converge on. Sits inside the panel so it
   reads as part of it; as a sibling underneath it looked orphaned. */
.stat-panel-foot {
  margin: 0;
  font-size: 12px;
  color: var(--cv-secondary);
  text-align: right;
  line-height: 1.35;
}

/* The ages table fills the column instead of stopping at a fixed 260px.
   .canvas-area aligns its child to flex-start, so the right column ended at its
   content height while the sidebar ran on: measured at 1180x900, 598.5px of empty
   space below the table, with only 11 of 111 ages visible. Stretching the column
   and letting the scroll box take the slack puts ~38 ages in view at that size.

   A taller fixed max-height was the other option and was rejected: the right
   number depends on the canvas height, the sidebar's content and the viewport, so
   any literal is correct at one size and wrong at the next. Filling is correct at
   every size by construction, which is also exactly the stated requirement --
   extend the table, stay within the left box height.

   Only when open: a collapsed <details> must not stretch. Desktop only: below the
   breakpoint the container stacks, the cross axis is width, and a flex-grown box
   would have no height to resolve against. The selectors carry a class more than
   the base rules in index.html's <style>, which is needed because that inline
   block is parsed after this file and would otherwise win on source order. */
@media (min-width: 769px) {
  .canvas-area { align-items: stretch; }

  .canvas-area > div {
    display: flex;
    flex-direction: column;
  }

  /* The figure and the identity line keep their own height; only the table flexes. */
  .canvas-area > div > #viewer-canvas-holder,
  .canvas-area > div > .identity { flex: none; }

  /* flex-basis 0, not auto. With auto the table's own content height -- 111 ages,
     2410px -- becomes the basis, so the column grows to it and the sidebar
     stretches to match: measured at 2994px tall, the whole table open, no scroll
     box left. A zero basis keeps the table out of the column's content height, so
     the column's height comes from the figure and the identity line, the sidebar
     stays the taller of the two, and the table takes only the slack between them.

     min-height: 0 is required alongside it. A flex item's default min-height: auto
     is its content-based minimum, and for this item that is the whole 111-row
     table, so leaving it at auto cancels the zero basis and the column inflates
     again -- measured at 2994px with the rule otherwise in place. The floor lives
     on the scroll box below instead, where overflow keeps it from propagating. */
  .ages-table[open] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .ages-table[open] > summary { flex: none; }

  /* Chrome (148 here) interposes a ::details-content block between <details> and
     its children, so the scroll box is not a flex item of the details and the rule
     below never reached it: the details resolved to 880px while the box inside it
     still rendered its full 2410px and overflowed. Making that box a flex column
     too passes the height through. Kept as its own rule, not grouped with the
     selectors above: an engine that does not know the pseudo-element drops the
     whole rule it appears in, and there the children are direct flex items already,
     so the rule below is what applies. Either way the fallback is the floor -- the
     height this table had before -- never anything worse. */
  .ages-table[open]::details-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .ages-table[open] > .ages-table-wrap {
    flex: 1 1 0;
    min-height: var(--cv-ages-table-min-height);
    max-height: none;
  }
}