/* ===========================================================================
   chart.css — the marks assets/chart.js draws

   IN assets/ FOR THE SAME REASON chart.js IS: both halves plot, and the kit
   is a mark and its style together. This file existed as a copy inside the
   operations page's own <style>, which meant the LAB's capture charts loaded
   the kit and none of its CSS — the ranked bars came out as rows of
   zero-height tracks and the axes had no stroke at all. A mark whose style
   lives in one of the two pages that draw it is a mark that is broken in the
   other one.

   THE RULES THESE ENFORCE, which match the ones in chart.js's own header:
   thin marks, a recessive hairline grid, an area fill at a tenth opacity,
   and TEXT IN THE INK TOKENS AND NEVER IN THE SERIES COLOUR — identity comes
   from the coloured mark beside the words, so a reader who cannot separate
   two hues still has the label.

   Page-specific behaviour stays in the page: the operations screen makes its
   strips' hit areas look clickable because clicking one filters, and that is
   true of that screen and not of the kit.
   =========================================================================== */
/* ============================================================== the charts
   Thin marks, recessive grid, and text in ink tokens — never in the series
   colour. See assets/chart.js. */
.nchart{display:block;overflow:visible}
.nc-axis,.nc-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.nc-tick,.nc-end{fill:var(--ink3);font:600 10px var(--mono)}
.nc-end{fill:var(--ink2);font-weight:700;font-size:11px}
.nc-bar{stroke:none}
.nc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.nc-fill{opacity:.1;stroke:none}
.nc-dot,.nc-hairdot{stroke:var(--panel);stroke-width:2}
.nc-hair{stroke:var(--ink3);stroke-width:1;stroke-dasharray:2 3}
.nc-hit{fill:transparent;cursor:crosshair}
.nchart-empty{font-size:12.5px;color:var(--ink3);padding:10px 0}

/* a two-part proportion bar: the 2px separation is a gap in the surface
   colour, not a stroke — a border would add ink that is not data */
.nchart-split{display:flex;gap:2px;height:8px;border-radius:5px;overflow:hidden;
              background:var(--panel2)}
/* The percentile annotations on a distribution. A solid hairline, because a
   dashed one reads as a projection, and a label in the ink tokens beside it —
   never the series colour. See NCHART.hist. */
.nc-rule{stroke:var(--ink3);stroke-width:1;shape-rendering:crispEdges}
.nc-rulelab{fill:var(--ink2);font:700 9.5px var(--mono);letter-spacing:.3px}

.nchart-split i{display:block;height:100%}

.nchart-hb{display:flex;flex-direction:column;gap:5px}
.nchart-hbr{display:flex;align-items:center;gap:9px;outline-offset:2px}
.nchart-hbr .lab{flex:0 0 36%;font:600 12px var(--mono);color:var(--ink2);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nchart-hbr .track{flex:1;height:10px;border-radius:5px;background:var(--panel2);overflow:hidden}
.nchart-hbr .track i{display:block;height:100%;border-radius:5px}
.nchart-hbr b{flex:0 0 56px;text-align:right;font:700 12px var(--mono);color:var(--ink2)}

.nchart-tip{position:fixed;z-index:9999;display:none;pointer-events:none;
            background:var(--panel);border:1px solid var(--line);border-radius:9px;
            padding:8px 11px;box-shadow:0 6px 22px rgba(0,0,0,.28);max-width:280px}
.nchart-tiph{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.5px;
             color:var(--ink3);margin-bottom:5px}
.nchart-tipr{display:flex;align-items:baseline;gap:7px;font-size:12.5px;line-height:1.6}
.nchart-tipr i{width:11px;height:2.5px;border-radius:2px;flex:none;align-self:center}
.nchart-tipr b{color:var(--ink);font-weight:700}
.nchart-tipr span{color:var(--ink3)}

/* ---------------------------------------------- part-to-whole, as a ring
   A ring and not a disc, so the figure the ring is about can sit in the hole
   where the question is answered. Every part also gets a row beside it with
   its own count — the ring is the proportion, the rows are the numbers, and
   neither is reachable only by colour. */
.nchart-donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nc-ring{fill:none;stroke:var(--panel2)}
.nc-seg{fill:none;stroke-linecap:butt}
.nc-mid{fill:var(--ink);font:700 19px var(--sans);letter-spacing:-.8px}
.nc-midu{fill:var(--ink3);font:700 8.5px var(--mono);text-transform:uppercase;
         letter-spacing:.8px}
.nchart-leg{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.nchart-legr{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.nchart-legr i{width:9px;height:9px;border-radius:3px;flex:none}
.nchart-legr span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nchart-legr b{font:700 12px var(--mono);color:var(--ink);white-space:pre}

/* ------------------------------------------------------------ a heatmap
   One measure over two dimensions, in one hue — more is stronger. EVERY
   CELL CARRIES ITS NUMBER: a grid whose value is only the depth of a colour
   cannot be read by somebody who cannot separate two depths of it, and
   cannot be read at all in print. */
table.nchart-heat{width:100%;border-collapse:separate;border-spacing:2px;
                  font-size:12px;table-layout:fixed}
table.nchart-heat th{font:700 9.5px var(--mono);text-transform:uppercase;
                     letter-spacing:.6px;color:var(--ink3);padding:0 0 3px;
                     text-align:center;font-weight:700}
table.nchart-heat th.rowh{text-align:left;padding:0 8px 0 0;max-width:12ch;
                          overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                          font-family:var(--sans);font-size:11.5px;text-transform:none;
                          letter-spacing:0;color:var(--ink2)}
table.nchart-heat td{padding:0}
table.nchart-heat .cell{display:flex;align-items:center;justify-content:center;
  height:30px;border-radius:6px;background:var(--panel2);
  font:700 12px var(--mono);color:var(--ink);outline-offset:2px}
table.nchart-heat .cell.zero{color:var(--ink4);font-weight:400}