/* Dashboard analytics charts: dual-axis line (equity vs investment) + showdown
 * made-hand bars. Panel chrome matches .dash-card; colors reuse theme vars. */

.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .dash-charts { grid-template-columns: 1fr; } }

.chart-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 16px 14px; min-width: 0; display: flex; flex-direction: column; gap: 10px;
}
.chart-card-wide { grid-column: 1 / -1; } /* full width, sits below the two */
.chart-cap { font-size: 10px; color: var(--muted); }

.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chart-title { font-size: 13px; font-weight: 800; letter-spacing: 0.2px; }
.chart-legend { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.chart-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.chart-leg-sw { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

/* depth filter */
.chart-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.chart-fbtn {
  font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; transition: color .12s, border-color .12s, background .12s;
}
.chart-fbtn:hover { color: var(--text); border-color: var(--gold-soft); }
.chart-fbtn.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* line chart */
.chart-plot { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-zero { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.7; }
.chart-axis { fill: var(--muted); font-size: 9px; }
.chart-axis-l { text-anchor: end; }
.chart-axis-r { text-anchor: start; }
/* dashboard charts 1, 3, 4: enlarged side (y-axis) numbers */
.dash-charts .chart-axis-l, .dash-charts .chart-axis-r { font-size: 14.4px; }
.chart-axis-x { text-anchor: middle; font-weight: 700; }
.chart-line { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* faint dashed bridge across hands with no recorded value (e.g. imported/old
   hands without equity) — keeps the trend continuous without reading as data */
.chart-line-gap { stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.35; }
.chart-dot { stroke: var(--panel); stroke-width: 2; }

/* showdown bars */
.sd-rows { display: flex; flex-direction: column; gap: 7px; }
.sd-row { display: grid; grid-template-columns: 96px 1fr 56px; align-items: center; gap: 10px; }
.sd-name { font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); }
.sd-bar-empty { justify-content: center; align-items: center; }
.sd-empty { color: var(--muted); font-size: 11px; }
.sd-seg { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--bg); overflow: hidden; min-width: 0; }
.sd-won { background: var(--green); }
.sd-tied { background: var(--gold); }
.sd-lost { background: var(--red); }
.sd-share { text-align: right; line-height: 1.15; }
.sd-share b { display: block; font-size: 12px; font-weight: 800; color: var(--text); }
.sd-share span { font-size: 9px; color: var(--muted); }

@media (max-width: 640px) {
  .sd-row { grid-template-columns: 78px 1fr 46px; gap: 7px; }
  .sd-name { font-size: 10px; }
}