/* C-Lion U3, the chart furniture. Promoted from concepts/charts.css.
   Axes, gridlines and labels are recessive by design: a hairline one shade off
   the surface, 10 and 11 sized labels in the muted ink, and no frame around the
   plot. The marks carry the data, the chrome gets out of the way (#500
   Chartjunk, Tufte, The Visual Display of Quantitative Information).

   Two rules bind every chart in this folder. One axis, never two. And identity
   is never carried by colour alone: every coloured series, segment or cell is
   also named in a legend with a word and, wherever it fits, an icon. */

.cx-chart { position:relative; padding:6px 10px 30px 40px; }
.cx-plot { position:absolute; left:40px; right:10px; top:6px; bottom:30px; }
.cx-chart-yaxis { position:absolute; left:0; top:6px; bottom:30px; width:34px; }
.cx-y {
  position:absolute; right:0; transform:translateY(-50%); font-size:var(--t-1);
  color:var(--ink-muted); font-family:var(--font-data); line-height:1;
}
.cx-chart-xaxis { position:absolute; left:40px; right:10px; bottom:6px; height:22px; }
.cx-x {
  position:absolute; transform:translateX(-50%); font-size:var(--t-1); color:var(--ink-muted);
  font-family:var(--font-data); white-space:nowrap; top:2px;
}
.cx-axis-title { font-size:var(--t-1); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); font-weight:700; }
.cx-axis-y { position:absolute; left:0; top:-16px; }
.cx-axis-x { position:absolute; right:10px; bottom:-14px; }

.cx-dot {
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--surface); border:2px solid #1B4332; transform:translate(-50%,-50%);
}
.cx-dot-peak {
  width:14px; height:14px; border-width:3px; background:#CDEBDD;
  box-shadow:0 0 0 5px rgba(205,235,221,.42);
}
/* the comparison series, the month before: a deeper tint of the same family,
   never a second hue and never a second axis */
.cx-dot-prev { width:7px; height:7px; border-color:#6E93B8; background:var(--surface); }
html[data-mode="dark"] .cx-dot { border-color:#CDEBDD; }
html[data-mode="dark"] .cx-dot-prev { border-color:#9DBBD6; }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cx-dot { border-color:#CDEBDD; }
  html:not([data-mode="light"]) .cx-dot-prev { border-color:#9DBBD6; }
}
.cx-series-prev { stroke:#6E93B8; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
html[data-mode="dark"] .cx-series-prev { stroke:#9DBBD6; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .cx-series-prev { stroke:#9DBBD6; } }

/* the annotation: a leader line from the point to a small card */
.cx-callout { position:absolute; transform:translate(-50%,-100%); padding-bottom:16px; pointer-events:none; }
.cx-callout-line {
  position:absolute; left:50%; bottom:0; width:1px; height:14px; background:#1B4332; opacity:.5;
}
html[data-mode="dark"] .cx-callout-line { background:#CDEBDD; }
.cx-callout-card {
  display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:8px 12px 8px 8px;
  box-shadow:0 8px 22px rgba(27,67,50,.10); white-space:nowrap;
}
html[data-mode="dark"] .cx-callout-card { box-shadow:0 8px 22px rgba(0,0,0,.42); }
.cx-callout-big { font-family:var(--font-data); font-weight:700; font-size:var(--t-4); color:var(--ink-strong); line-height:1.1; }
.cx-callout-sub { font-size:var(--t-1); color:var(--ink-muted); }
.cx-callout-left .cx-callout-card { transform:translateX(12%); }
.cx-callout-right .cx-callout-card { transform:translateX(-12%); }
/* when the point sits high in the plot the card goes beside it, with a short
   horizontal leader, so the peak itself stays visible */
.cx-callout-side { transform:translate(0,-50%); padding-bottom:0; padding-left:20px; }
.cx-callout-side .cx-callout-card { transform:none; }
.cx-callout-side .cx-callout-line { left:0; bottom:auto; top:50%; width:16px; height:1px; }
.cx-callout-side-left { transform:translate(-100%,-50%); padding-left:0; padding-right:20px; }
.cx-callout-side-left .cx-callout-line { left:auto; right:0; }

.cx-spark { height:34px; }
.cx-spark-wrap { height:34px; margin-top:auto; }

.cx-ring { position:relative; flex:none; }
.cx-ring-mid {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:4px;
}
/* the ring's own dash length is set as an attribute in the markup, so nothing
   here may set stroke-dasharray: a stylesheet beats a presentation attribute
   and would quietly erase the value the chart just computed. The draw is done
   by animating stroke-dashoffset from the arc length to zero, set inline. */

.cx-segbar {
  display:flex; gap:4px; height:16px; border-radius:999px; overflow:hidden;
  background:var(--surface-2);
}
.cx-seg { display:block; height:100%; }

.cx-minibars { display:flex; align-items:flex-end; gap:4px; height:46px; max-width:240px; }
.cx-minibar { flex:1; border-radius:4px 4px 0 0; min-height:5px; border:1px solid rgba(27,67,50,.16); }
html[data-mode="dark"] .cx-minibar { border-color:rgba(248,245,241,.14); }

/* grouped bars, two months on one scale, a 2px surface gap between neighbours */
.cx-bars { display:flex; align-items:flex-end; gap:16px; height:150px; padding-top:6px; }
.cx-bar-group { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:4px; height:100%; }
.cx-bar { width:16px; border-radius:4px 4px 0 0; min-height:3px; }
.cx-bar-now { background:#1B4332; }
.cx-bar-prev { background:#D6E4EE; border:1px solid rgba(27,67,50,.2); }
html[data-mode="dark"] .cx-bar-now { background:#CDEBDD; }
html[data-mode="dark"] .cx-bar-prev { background:rgba(214,228,238,.34); border-color:rgba(248,245,241,.2); }
@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .cx-bar-now { background:#CDEBDD; }
  html:not([data-mode="light"]) .cx-bar-prev { background:rgba(214,228,238,.34); border-color:rgba(248,245,241,.2); }
}
.cx-bars-x { display:flex; gap:16px; margin-top:8px; }
.cx-bars-x span { flex:1; text-align:center; font-size:var(--t-1); color:var(--ink-muted);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700; }

/* the one hue the heat ramp steps through, light to dark on a light ground and
   dark to light once the ground inverts. Sequential magnitude, one hue, never
   a rainbow, and the counts are given in words beneath so the cells are never
   the only way to read a value. */
:root { --heat-ink:27,67,50; }
html[data-mode="dark"] { --heat-ink:205,235,221; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) { --heat-ink:205,235,221; } }

.cx-heat { display:grid; gap:4px; }
.cx-heat-cell { display:block; height:30px; border-radius:5px; }
/* an empty cell is an outline, never a fill: a filled "no posts" cell and a
   filled "one post" cell were nearly the same green on a dark card */
.cx-heat-none { background:transparent; border:1px solid var(--border); }
html[data-mode="dark"] .cx-heat-none { border-color:rgba(248,245,241,.16); }
/* one grid holds the day names, the week labels and the cells, so the labels
   cannot drift out of line with the row they name */
.cx-heat-wrap { display:grid; grid-template-columns:42px 1fr; gap:8px 12px; align-items:center;
  max-width:520px; }
.cx-heat-rows { display:grid; grid-auto-rows:30px; gap:4px; font-size:var(--t-1); color:var(--ink-muted);
  text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.cx-heat-rows span { display:flex; align-items:center; }
.cx-heat-cols { display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  font-size:var(--t-1); color:var(--ink-muted); text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; text-align:center; }
.cx-heat-scale { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:var(--t-1);
  color:var(--ink-muted); flex-wrap:wrap; }
.cx-heat-swatch { width:15px; height:15px; border-radius:4px; flex:none; }

.cx-legend { display:flex; flex-wrap:wrap; gap:16px; }
.cx-legend-item { display:flex; align-items:center; gap:8px; font-size:var(--t-2); color:var(--ink); }
.cx-legend-key { width:12px; height:12px; border-radius:4px; flex:none; }
.cx-legend-line { width:16px; height:3px; border-radius:2px; flex:none; }
.cl-body .cx-legend-item svg, .cl-body .cx-legend-item .cx-ic { width:16px; height:16px; color:var(--ink-strong); }

/* Chart.js canvases sit in a fixed height box so a resize cannot stretch them */
.cx-canvas-wrap { position:relative; height:280px; }
.cx-canvas-wrap-sm { height:190px; }

@media (max-width:720px) {
  .cx-chart { padding-left:32px; }
  .cx-plot { left:32px; }
  .cx-chart-yaxis { width:26px; }
  .cx-chart-xaxis { left:32px; }
  .cx-x:nth-child(even) { display:none; }
  .cx-callout-card { padding:6px 9px; }
  .cx-callout-big { font-size:var(--t-3); }
  /* at phone width there is no room to the right of a mid plot point, so every
     side callout hangs to the left instead of running off the card */
  .cx-callout-side { transform:translate(-100%,-50%); padding-left:0; padding-right:16px; }
  .cx-callout-side .cx-callout-line { left:auto; right:0; }
  .cx-bars { gap:8px; }
  .cx-bar { width:12px; }
  .cx-bars-x { gap:8px; }
}