/* Fitness Lab chart styles. Theme-aware (light default, dark via media query
   and [data-theme]). Data hues live in fitness-charts.js; this file owns the
   structural ink/grid/surface and the component chrome. */
:root {
  --lab-font: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --lab-surface: #fffaf4;
  --lab-ink: #1f3a2c;
  --lab-ink-soft: #7a7266;
  --lab-grid: #e7ddcd;
  --lab-event: #a05a2c;
  --lab-tip-bg: #1f3a2c;
  --lab-tip-ink: #f4efe6;
  --lab-border: #e0d6c6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lab-surface: #1a1f1c;
    --lab-ink: #e8efe6;
    --lab-ink-soft: #9fb0a4;
    --lab-grid: #33403a;
    --lab-event: #e0a06a;
    --lab-tip-bg: #e8efe6;
    --lab-tip-ink: #16201a;
    --lab-border: #33403a;
  }
}
:root[data-theme="dark"] {
  --lab-surface: #1a1f1c; --lab-ink: #e8efe6; --lab-ink-soft: #9fb0a4;
  --lab-grid: #33403a; --lab-event: #e0a06a; --lab-tip-bg: #e8efe6;
  --lab-tip-ink: #16201a; --lab-border: #33403a;
}
:root[data-theme="light"] {
  --lab-surface: #fffaf4; --lab-ink: #1f3a2c; --lab-ink-soft: #7a7266;
  --lab-grid: #e7ddcd; --lab-event: #a05a2c; --lab-tip-bg: #1f3a2c;
  --lab-tip-ink: #f4efe6; --lab-border: #e0d6c6;
}

.lab-figure { position: relative; margin: 0; }
.lab-svg { width: 100%; height: auto; display: block; overflow: visible; }
.lab-svg text { font-family: var(--lab-font); }
.lab-grid { stroke: var(--lab-grid); stroke-width: 1; }
.lab-zero { stroke: var(--lab-ink-soft); stroke-width: 1.5; opacity: 0.6; }
.lab-tick { fill: var(--lab-ink-soft); font-size: 11px; font-weight: 500; }
.lab-muted { opacity: 0.7; }
.lab-endlabel { font-size: 11px; font-weight: 700; }
.lab-event { stroke: var(--lab-event); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.8; }
.lab-event-label { fill: var(--lab-event); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.lab-target { stroke: #009e73; stroke-width: 1.5; stroke-dasharray: 5 4; }
.lab-target-label { fill: #009e73; }
.lab-cross { stroke: var(--lab-ink-soft); stroke-width: 1; opacity: 0.5; }
.lab-ring { stroke: var(--lab-surface); }

/* Tooltip */
.lab-tip {
  position: absolute; top: 8px; pointer-events: none; z-index: 5;
  background: var(--lab-tip-bg); color: var(--lab-tip-ink);
  font-family: var(--lab-font); font-size: 0.78rem; line-height: 1.5;
  padding: 8px 11px; border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  max-width: 260px;
}
.lab-tip-date { display: block; font-weight: 700; margin-bottom: 3px; }
.lab-tip-row { display: block; white-space: nowrap; }
.lab-tip-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Legend */
.lab-legend {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--lab-font); font-size: 0.8rem; color: var(--lab-ink);
}
.lab-legend li { display: flex; align-items: center; }
.lab-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; }

.lab-caption {
  margin: 12px 0 0; font-family: var(--lab-font); font-size: 0.85rem; color: var(--lab-ink-soft);
}

/* Table view */
.lab-table-toggle {
  margin-top: 14px; background: none; border: 1px solid var(--lab-border);
  color: var(--lab-ink); font-family: var(--lab-font); font-size: 0.72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
}
.lab-table-toggle:hover { border-color: var(--lab-ink); }
.lab-table-toggle:focus-visible { outline: 2px solid var(--lab-ink); outline-offset: 2px; }
.lab-table-box { margin-top: 12px; max-height: 340px; overflow: auto; border: 1px solid var(--lab-border); border-radius: 10px; }
.lab-table { border-collapse: collapse; width: 100%; font-family: var(--lab-font); font-size: 0.82rem; }
.lab-table caption { text-align: left; padding: 10px 12px; font-weight: 700; color: var(--lab-ink); }
.lab-table th, .lab-table td { padding: 7px 12px; text-align: right; border-top: 1px solid var(--lab-border); color: var(--lab-ink); white-space: nowrap; }
.lab-table thead th { position: sticky; top: 0; background: var(--lab-surface); text-align: right; }
.lab-table th[scope="row"], .lab-table thead th:first-child { text-align: left; }