/* What every page with figures shares: a figure in a section of the chassis,
   the tooltip and the plot vocabulary. Colours are the context roles (the
   ones named ctx) wherever a figure may stand on a field. */

/* -- A figure: the finding, the legend, the plot (or its table) and a note;
   on a landing page all but the plot is folded away under it ---------------- */
/* wide matrices scroll inside their figure instead of pushing the page */
.fig-plot{ overflow-x:auto; }
.fp-sec__body > * + :is(.legend, .fig-plot, .fig-data, .fig-note, .fold){ margin-top:var(--fp-space-3); }
.fp-sec__body > .fig-find, .fp-sec__body > .fig-note{ margin-bottom:0; }
.fp-sec__body > .fig-find{ margin-top:0; }
.fold > .fig-find, .fold > .legend, .fold > .fig-note, .fold > .fig-data{ margin:var(--fp-space-3) 0 0; }
/* several plots of one figure, side by side where there is room */
.panels{ display:flex; flex-wrap:wrap; gap:var(--fp-space-4); }
.fig-find{ font-size:var(--fp-text-base); line-height:var(--fp-leading); color:var(--fp-ctx-body); max-width:var(--fp-page-measure); }
.fig-find b{ font-weight:var(--fp-heading-h2-weight); color:var(--fp-ctx-ink); }
.fig-note{ font-size:var(--fp-text-sm); line-height:var(--fp-leading-snug); color:var(--fp-ctx-body); max-width:var(--fp-page-measure); }
.legend{ display:flex; flex-wrap:wrap; gap:var(--fp-space-1) var(--fp-space-3); align-items:center;
  font-family:var(--fp-font-mono); font-size:var(--fp-text-xs); color:var(--fp-ctx-body); }
.legend .key{ display:inline-flex; align-items:center; gap:var(--fp-space-1); white-space:nowrap; }
/* display:flex above would outrank the hidden attribute */
.legend[hidden]{ display:none; }

/* -- Tooltip: a tool with its own edge, so the one thing here that is a card */
.tip{ position:fixed; z-index:20; pointer-events:none; max-width:22rem; background:var(--fp-card-background);
  border:var(--fp-card-border-width) solid var(--fp-card-border); padding:var(--fp-space-2) var(--fp-space-3);
  font-family:var(--fp-font-mono); font-size:var(--fp-text-xxs); color:var(--fp-body); line-height:var(--fp-leading-snug); }
.tip-title{ font-family:var(--fp-font-sans); font-size:var(--fp-text-xs); font-weight:var(--fp-heading-h2-weight); color:var(--fp-ink); margin-bottom:var(--fp-space-1); }
.tip-row{ display:grid; grid-template-columns:minmax(4.5rem,auto) auto 1fr; gap:var(--fp-space-2); align-items:baseline; }
.tip-row.on .tip-key{ color:var(--fp-sage-deep); font-weight:var(--fp-heading-h3-weight); }
.tip-val{ font-size:var(--fp-text-xs); font-weight:var(--fp-heading-h3-weight); color:var(--fp-ink); text-align:right; }
.tip-sub{ color:var(--fp-muted); }
.tip-foot{ margin-top:var(--fp-space-1); padding-top:var(--fp-space-1); border-top:var(--fp-hairline) solid var(--fp-gray); color:var(--fp-muted); }

/* -- Plots: open, not boxed -------------------------------------------------
   The baseline is the only axis line, an ink keyline with ticks hanging from
   it; a hairline grid in the signature grey runs across; a matrix has no axis
   and is held by four registration marks. Labels are mono: titles in ink, tick
   labels muted. Fills are flat. */
.plot{ display:block; }
.plot text{ font-family:var(--fp-font-mono); font-size:var(--fp-text-xxs); fill:var(--fp-ctx-body); }
.plot .t-title{ text-transform:uppercase; letter-spacing:var(--fp-track-label); fill:var(--fp-ctx-ink); }
.plot .t-tick{ font-variant-numeric:tabular-nums; }
.plot .t-row{ fill:var(--fp-ctx-ink); }
.plot .t-ann{ fill:var(--fp-ctx-ink); font-weight:var(--fp-label-weight); }
.plot .t-lab{ font-size:var(--fp-text-xs); font-weight:var(--fp-heading-h3-weight); fill:var(--fp-ctx-ink); }
.plot .t-lab.ctx{ fill:var(--fp-ctx-body); }
.plot .t-strong{ fill:var(--fp-ctx-ink); font-weight:var(--fp-heading-h3-weight); }
.plot .t-muted{ fill:var(--fp-ctx-muted); }
.plot a:hover .t-link{ fill:var(--fp-sage-deep); }
.plot .base{ stroke:var(--fp-ctx-ink); stroke-width:var(--fp-keyline); }
.plot .reg{ fill:none; stroke:var(--fp-ctx-mark); stroke-width:var(--fp-line); }
.plot .grid{ stroke:var(--fp-ctx-rule); stroke-width:var(--fp-hairline); }
.plot .tick{ stroke:var(--fp-ctx-ink); stroke-width:var(--fp-hairline); }
.plot .month{ stroke:var(--fp-ctx-muted); stroke-width:var(--fp-hairline); }
.plot .hit{ fill:transparent; }
.plot .cross{ stroke:var(--fp-ctx-ink); stroke-width:var(--fp-hairline); pointer-events:none; }
.plot .mine{ fill:var(--fp-sage-xl); }
/* a dashed line is a reference value, never a grid */
.plot .ref{ stroke:var(--fp-ctx-ink); stroke-width:var(--fp-hairline); stroke-dasharray:5 3; }
.plot .ref-solid{ stroke:var(--fp-ctx-ink); stroke-width:var(--fp-hairline); }
.plot .ann{ stroke:var(--fp-ctx-ink); stroke-width:var(--fp-hairline); stroke-dasharray:2 2; }
.plot .ann-dot{ fill:var(--fp-ctx-ink); }
.plot .label-box{ fill:var(--fp-ctx-bg); }
.plot .cell-hover{ fill:none; stroke:var(--fp-ctx-ink); stroke-width:var(--fp-hairline); pointer-events:none; }
/* a sequential ramp in four steps: the two lightest Faceplate steps are under
   2:1 on white, so the ramp starts at the fourth */
.plot .q1{ fill:var(--fp-seq-4); }
.plot .q2{ fill:var(--fp-seq-5); }
.plot .q3{ fill:var(--fp-seq-6); }
.plot .q4{ fill:var(--fp-seq-7); }
.plot .hatch{ stroke:var(--fp-terra); stroke-width:var(--fp-hairline); }