/* Chart and data, one figure.
 *
 * A research table that compares builds opens as a picture and keeps the table one tab away. The two are the same
 * figure, so they sit in one [data-tabs] group (tabs.js, the contract /platform/ already uses) and the reader picks.
 * The picture is first because a column of 10 estimates with 95% ranges is something to look at before it is
 * something to read; the table is the record and stays whole, byte for byte, in the Data tab.
 *
 * THE DATUM IS IN THE MARKUP. A bar or a dot is placed by custom properties written on its element (--v, --lo, --hi),
 * the way the eval cards write a bar's width: the page says the same thing with no script, and a test
 * (test/research-chart-data.test.mjs) reads those properties back against the table beside them, so the picture
 * cannot drift from the numbers. Nothing here computes a position in script; the calc()s below are the whole of it.
 *
 * NO SCRIPT, NO TABS. Without JavaScript the tab bar does nothing, so the page head carries a <noscript> rule that
 * hides the bar and shows both panels: chart, then table.
 *
 * Plain HTML and CSS, not an SVG scaled to the column: on a phone an SVG shrinks its own labels with it, and these
 * charts are mostly labels. Colours are the site's tokens, so day, dusk and night are already handled: the Models blue
 * is a Tileward build, grey is the same model as published. Never colour alone: a build is a filled dot, the
 * published model a hollow one.
 */
.vz{margin-top:4px}
.vz > .itabs{margin-top:20px}
.vz > [data-panel]{margin-top:16px}
.vz > [data-panel] > table{margin-top:0}

.vz-chart{
  --vz-a:var(--p-models);
  --vz-b:var(--dim2);
  font-family:var(--sans);font-size:calc((14.5px) * var(--ts));line-height:1.35;color:var(--txt);
  border-top:1px solid var(--line2);
}

/* ---- key ---------------------------------------------------------------------------------------------------- */
.vz-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:14px 0 12px;color:var(--dim);font-size:.93em}
.vz-key > span{display:inline-flex;align-items:center;gap:9px}
.vz-key .vz-n{color:var(--dim2)}
.vz-mk{--c:var(--vz-a);position:relative;display:inline-block;flex:none;width:28px;height:12px}
.vz-mk::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--c);opacity:.55}
.vz-mk::after{content:"";position:absolute;left:50%;top:50%;box-sizing:border-box;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--c);background:var(--c)}
.vz-mk.b{--c:var(--vz-b)}
.vz-mk.b::after{background:var(--bg)}
.vz-sw{--c:var(--vz-a);display:inline-block;flex:none;width:16px;height:12px;border-radius:3px;background:var(--c)}
.vz-sw.b{--c:var(--line-deep)}

/* ---- rows: label, picture, numbers --------------------------------------------------------------------------- */
.vz-row{
  display:grid;grid-template-columns:minmax(9.5em,14.5em) minmax(0,1fr) 6.4em;column-gap:18px;align-items:center;
  border-top:1px solid var(--line);
}
.vz-l{min-width:0;padding:8px 0}
.vz-l b{display:block;font-weight:500;color:var(--txt)}
.vz-row.hi .vz-l b{font-weight:650}
.vz-l small{display:block;margin-top:1px;color:var(--dim2);font-size:.86em}
.vz-v{display:flex;flex-direction:column;gap:2px;padding:8px 0;text-align:right;font-family:var(--mono);font-size:.9em;line-height:18px}
.vz-v > span{display:block;height:18px;white-space:nowrap}
.vz-v .a{color:var(--vz-a);font-weight:600}
.vz-v .b{color:var(--vz-b)}
.vz-v small{font-family:var(--sans);font-size:.88em;color:var(--vz-a);margin-left:.4em}

/* ---- the range plot: one dot and its 95% range, per build, against a zero line ------------------------------ */
.vz-plot{
  position:relative;min-width:0;margin:0 14px;padding:8px 0;
  background:
    linear-gradient(var(--line),var(--line)) right top / 1px 100% no-repeat,
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px calc(100% / var(--n)));
}
/* The zero line: where the build and what it is measured against are level. */
.vz-plot::after{
  content:"";position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--dim);opacity:.7;
  left:calc(var(--min) / (var(--min) - var(--max)) * 100%);
}
.vz-lane{--c:var(--vz-a);position:relative;display:block;height:18px;z-index:1}
.vz-lane + .vz-lane{margin-top:2px}
.vz-lane.b{--c:var(--vz-b)}
.vz-w{
  position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--c);opacity:.55;
  left:calc((var(--lo) - var(--min)) / (var(--max) - var(--min)) * 100%);
  width:calc((var(--hi) - var(--lo)) / (var(--max) - var(--min)) * 100%);
}
.vz-w::before,.vz-w::after{content:"";position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--c)}
.vz-w::before{left:0}
.vz-w::after{right:0}
.vz-d{
  position:absolute;top:50%;box-sizing:border-box;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:2px solid var(--c);background:var(--c);
  left:calc((var(--v) - var(--min)) / (var(--max) - var(--min)) * 100%);
}
.vz-lane.b .vz-d{background:var(--bg)}

/* A row with nothing to plot, said in words across the picture and the numbers. */
.vz-row .vz-say{grid-column:2 / -1;padding:8px 0;color:var(--dim)}

/* The axis under the rows: tick labels at their positions, then which way is better. */
.vz-ax{border-top:1px solid var(--line);padding-top:6px}
.vz-ax > div{grid-column:2}
.vz-ticks{position:relative;height:1.5em;margin:0 14px;color:var(--dim2);font-family:var(--mono);font-size:.84em}
.vz-ticks > span{position:absolute;top:0;transform:translateX(-50%);left:calc((var(--t) - var(--min)) / (var(--max) - var(--min)) * 100%)}
.vz-ticks > .z{color:var(--txt);font-weight:600}
.vz-cue{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;margin:2px 0 0;padding-bottom:6px;color:var(--dim);font-size:.9em}

/* ---- the bar chart: one bar per build, from zero ------------------------------------------------------------- */
.vz-bars .vz-row{--c:var(--line-deep)}
.vz-bars .vz-row.a{--c:var(--vz-a)}
.vz-bars .vz-row.sp{margin-top:8px}
.vz-bars .vz-l,.vz-bars .vz-v{padding:10px 0}
.vz-bars .vz-v{display:block;line-height:20px}
.vz-bars .vz-v > span{height:auto}
.vz-bars .vz-v .a{color:var(--vz-a)}
.vz-bars .vz-v .b{color:var(--txt);font-weight:600}
.vz-track{position:relative;min-width:0;height:20px;border-radius:5px;background:var(--card2)}
.vz-track > i{
  position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--c);
  width:calc(var(--v) / var(--max) * 100%);
}

/* ---- phones: the label and the numbers share a line, the picture takes the full width under them ------------- */
@media (max-width:680px){
  .vz-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "p p";column-gap:12px}
  .vz-l{grid-area:l;padding:8px 0 2px}
  .vz-v{grid-area:v;padding:8px 0 2px}
  .vz-plot,.vz-track{grid-area:p}
  .vz-plot{margin:0 8px 2px}
  .vz-track{margin-bottom:10px}
  .vz-bars .vz-l,.vz-bars .vz-v{padding:10px 0 2px}
  .vz-row .vz-say{grid-column:1 / -1;padding:8px 0}
  .vz-ax{display:block}
  .vz-ticks{margin:0 8px}
  .vz-cue{padding-bottom:10px}
}
