@charset "UTF-8";

/*======================================================================*
 * <mxw-climate-chart> — the climate chart's own styles.
 *
 * Loaded by the page (`<m:style href="/moxow/components/mxw-climate-chart.css"/>`),
 * or injected as a <link> by mxw-climate-chart.js when a page has not
 * declared it, so dropping in the script alone still works.
 *
 * In @layer mxw.climate-chart, under `theme` and `site` in the order
 * m:head-layers declares, so a page restyles it by saying anything at
 * all. Knobs:
 *
 *   --mxw-climate-chart-width    the ceiling on the chart  (default 600px)
 *   --mxw-climate-chart-height   the chart's own height    (default 200px)
 *
 * The declaration is the load-bearing part, not the layer. These rules
 * used to be a string injected by the script with no layer at all, under
 * the comment "light DOM, so the page's own CSS overrides this" — which
 * was true only of properties this sheet never set: an unlayered rule
 * beats every layered one whatever its specificity, so a page rule in
 * @layer site could not touch the sizing below. An unknown layer name
 * would be no better, being appended AFTER the declared ones, so the
 * order has to be declared (MoXoW does it inline and first).
 *
 * The chart needs a definite box: Chart.js sizes its canvas from the
 * element, and a height of auto measures 0.
 *======================================================================*/

@layer mxw.climate-chart {
  mxw-climate-chart {
    display: block;
    inline-size: 100%;
    /* A twelve-month chart below ~300px is a smear of unreadable ticks,
       so it holds that floor where there is room for it — but never past
       its container, which is what the bare 300px used to do on a phone
       (16px wider than the reading column at a 320px viewport). */
    min-inline-size: min(300px, 100%);
    max-inline-size: var(--mxw-climate-chart-width, 600px);
    block-size: var(--mxw-climate-chart-height, 200px);

    & > figure {
      display: flex;
      flex-direction: column;
      block-size: 100%;
      margin: 0;
    }

    /* The caption sits above the plot, indented to the plot's own ink
       rather than to the element edge. */
    & figcaption {
      margin-inline-start: 1ex;
    }

    /* The canvas holder takes what the caption leaves. min-block-size: 0
       because a flex item's automatic minimum is its content, and the
       canvas would then refuse to shrink; position: relative because
       Chart.js measures its parent to size the canvas. */
    & figure > div {
      position: relative;
      flex: auto;
      min-block-size: 0;
    }

    & canvas {
      max-inline-size: 100%;
    }
  }
}