/* ============================================================
   Pipezoom - lchart.css
   The multi-line chart on the Dashboard, drawn by js/lchart.js: the
   head, the percentage scale, the lines, dots, tips and the legend.
   Globals: none.
   Notes: docs/notes/app.pipezoom.com/css/lchart.css.md
   ============================================================ */

/* Multi-line chart: every metric as a share of its daily target */
.chart{margin-top:14px;}
.chart-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.chart-title{font-size:.88rem;font-weight:600;}
.chart-sub{font-size:.78rem;color:var(--ink-faint);}
/* The plot is 2 columns, the percentage scale and the drawing; the svg inside sets the height. */
.chart-plot{
  --lch-h:180px;
  /* The svg's top and bottom padding as a share of its height, for the scale to line up with the grid. */
  --lch-inset:calc(var(--lch-h) * 3 / 56);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:8px;
  margin-top:4px;
}
.lchart-y{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;justify-content:space-between;
  flex:0 0 auto;
  height:var(--lch-h);
  /* Half a line back at each end centers a figure on its grid line. */
  padding:calc(var(--lch-inset) - .5em) 0;
  font-size:.64rem;color:var(--ink-faint);
  text-align:right;
  line-height:1;
}
/* The scale runs edge to edge, with its first and last figures on the outer grid lines. */
.lchart-y span{display:block;}
.lchart-canvas{grid-column:2;grid-row:1;position:relative;min-width:0;padding:0 3px;}
.chart-axis{
  grid-column:2;grid-row:2;
  position:relative;height:1.1em;margin-top:7px;
  padding:0 3px;
}
/* Each label is on its own point, and the first and last pull inside. */
.chart-axis span{
  position:absolute;top:0;
  font-size:.66rem;color:var(--ink-faint);
  white-space:nowrap;
}
.chart-axis .ax-today{color:var(--ink);font-weight:700;}
.chart-foot{font-size:.76rem;color:var(--ink-faint);margin-top:8px;}

/* Multi-line chart, the drawing itself */
.lchart-svg{display:block;width:100%;height:var(--lch-h);overflow:visible;}
.lchart-grid{stroke:var(--line);stroke-width:0.25;stroke-dasharray:1 1.4;}
/* The daily target is solid against the dashed grid. */
.lchart-goal{stroke:var(--line-strong);stroke-width:0.35;}
.lchart-today{stroke:var(--accent);stroke-width:0.4;opacity:.3;}
.lchart-line{
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.lchart-marks{position:absolute;top:0;bottom:0;left:3px;right:3px;pointer-events:none;}
.lchart-dot{
  position:absolute;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  border:1.5px solid var(--surface-raised);
}
.lchart-empty{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:.8rem;color:var(--ink-faint);
  pointer-events:none;
}
.lchart-tips{position:absolute;top:0;bottom:0;left:3px;right:3px;}
.lchart-hover{position:absolute;top:0;bottom:0;cursor:crosshair;}
.lchart-tip{
  display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:6px;
  background:var(--surface-hover);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:6px 9px;
  font-size:.72rem;line-height:1.45;
  white-space:nowrap;color:var(--ink);
  z-index:5;pointer-events:none;
  box-shadow:var(--shadow-overlay);
}
/* The readouts on the first and last columns pull back inside the card. */
.lchart-hover:first-child .lchart-tip{left:0;transform:none;}
.lchart-hover:last-child .lchart-tip{left:auto;right:0;transform:none;}
.lchart-hover:hover .lchart-tip{display:block;}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 0 0;}
.lchart-key{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ink-faint);}
.lchart-key b{color:var(--ink);font-weight:600;}
.lchart-swatch{width:12px;height:3px;border-radius:2px;flex-shrink:0;}
.ax-hide{visibility:hidden;}
@media (max-width:640px){
  .chart-plot{--lch-h:150px;}
  .lchart-y{font-size:.6rem;}
}