/* ============================================================
   GP Team Hub - lchart.css
   The multi-line chart on Today. Split out of activity.css, which was
   at its size ceiling; it pairs with js/lchart.js.
   ============================================================ */

/* ---- 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 a two-column box: the percentage scale, then the drawing.
   It carries no height of its own, because the svg inside sets the
   height and a fixed box here pushed the drawing out through the top. */
.chart-plot{
  --lch-h:180px;
  /* The svg's own top and bottom padding, as a share of its height, so
     the scale beside it lines its figures up with the grid rather than
     with the edge of the box. */
  --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, so a figure is centred on its grid
     line rather than hanging below it. */
  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 of the drawing, so its first and last
   figures sit on the top and bottom grid lines rather than centred on
   the column. */
.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 placed on its own point rather than sharing the width
   evenly, because the points sit at both edges and even columns put
   every label half a day off. 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;}

/* A win is drawn broken, because it is what the work turned into rather
   than the work, and it shares its hue with the activity that produces
   it. The dash is in user units of the 100-wide viewBox, so it reads the
   same at every card width. */
.lchart-line-win{stroke-dasharray:2.6 2;}

/* ---- 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. Solid where the grid is dashed, so the one rule
   that means something is the one that reads as a rule. */
.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 reach past the drawing, so
   they pull back inside instead of widening 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;}
/* The key carries the dash too, so the legend answers which line it is
   without the reader matching two greens by eye. */
.lchart-swatch-win{
  background:none;
  background-image:linear-gradient(to right,currentColor 62%,transparent 62%);
  background-size:5px 3px;
  border-radius:0;
}
.ax-hide{visibility:hidden;}
@media (max-width:640px){
  .chart-plot{--lch-h:150px;}
  .lchart-y{font-size:.6rem;}
}