/* Charts (cChart)

   The markup cChart emits is:

     <div id="cCHT_name" class="cChart" data-chart-name data-chart-type>
       <h1 class="cCht_title">Title</h1>     (only when setTitle() was called)
       <div class="cCht_data">{…}</div>
     </div>

   .cCht_data arrives holding the chart's data as JSON. loadChart.js parses it,
   replaces it with a <canvas> and marks the widget cCht_rendered, which is what
   reveals it below -- so the JSON is never on screen, and a page whose script
   did not run shows nothing rather than a blob of data.

   Drawn plain, to match the chart cells inside a cTable: those carry no rules of
   their own at all, so a canvas sits straight on the page with nothing round it.
   The one thing not borrowed from them is their sizing. A table cell bounds its
   chart's width, and a standalone chart has nothing doing that -- left to pick
   its own size against the full content column, a pie grows into a circle the
   width of the page -- so the box is given a size below. */

/* Main chart */

.cChart {
    display: block;
    padding: 0 0 2em 0;
}

/* Title -- an <h1>, but the global rule in main.css resets every element to the
   body size, so it needs its own. Matched to .cTb_title so a chart heading and a
   table heading on the same page are the same size. */

.cCht_title {
    font-size: 1.4em;
    font-weight: normal;
    padding: 0 0 .5em 0;
}

/* Data panel */

.cCht_data {
    /* Hidden until loadChart.js has swapped the JSON for a canvas. */
    display: none;
}

.cChart.cCht_rendered .cCht_data {
    display: block;
    /* Chart.js is told not to keep its own aspect ratio, so the height has to
       come from here or the canvas collapses to nothing. */
    height: 20em;
    /* Roughly the width a chart gets inside a table cell. Without a ceiling the
       canvas stretches across the whole content column, which leaves a line
       chart's points strung far apart and a pie absurdly large. */
    max-width: 40em;
    position: relative;
}