/* Waterline chart presentation. Structure and behaviour live in js/charts/waterline.js. */

.wl__plot { position: relative; }
.wl__svg { display: block; overflow: visible; }

/* ── Tooltip: a small pane of glass lifted off the chart ─────────────────── */

.wl__tip {
  position: absolute; top: var(--space-2); z-index: 2;
  transform: translateX(-50%);
  min-width: 178px; padding: var(--space-3) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius);
  background:
    linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)) padding-box,
    linear-gradient(150deg, var(--glass-edge-a), var(--glass-edge-b)) border-box;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  box-shadow: inset 0 1px 0 var(--glass-hl), var(--shadow-3);
  font-size: var(--text-sm);
  pointer-events: none;
}
.wl__tip-date {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-subtle);
  margin-bottom: var(--space-2);
}
.wl__tip-row {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center;
  gap: var(--space-2); padding: 3px 0;
}
.wl__tip-name { color: var(--ink-muted); }
.wl__tip-val { font-family: var(--font-display); }
.wl__tip-foot {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--glass-line);
  font-size: var(--text-xs); color: var(--ink-subtle);
}

/* ── Swatch: colour AND stroke style, so the legend matches the line ─────── */

.wl__swatch { display: block; width: 18px; height: 0; border-top: 3px solid var(--c); }
.wl__swatch[style*='7 4'] { border-top-style: dashed; }
.wl__swatch[style*='2 4'] { border-top-style: dotted; }

/* ── Legend: interactive, toggles series ────────────────────────────────── */

.wl__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
}
.wl__legend-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--glass-line); border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-hl);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}
.wl__legend-btn:hover { transform: translateY(-1px); }
.wl__legend-btn[aria-pressed='false'] { opacity: 0.42; }
.wl__legend-btn[aria-pressed='false'] .wl__swatch { border-top-color: var(--ink-subtle); }

/* ── Data table fallback ────────────────────────────────────────────────── */

.wl__table-wrap { margin-top: var(--space-4); }
.wl__table-wrap > summary {
  min-height: 44px; display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--blue);
  cursor: pointer;
}
.wl__table {
  width: 100%; margin-top: var(--space-2);
  border-collapse: collapse; font-size: var(--text-sm);
  /* Wide tables scroll inside themselves; the page never scrolls sideways. */
  display: block; overflow-x: auto;
}
.wl__table th, .wl__table td {
  padding: var(--space-2) var(--space-3);
  text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--glass-line);
}
.wl__table thead th { color: var(--ink-subtle); font-weight: 600; }
.wl__table tbody th { text-align: left; font-weight: 500; color: var(--ink-muted); }
.wl__table abbr {
  font-size: var(--text-xs); color: var(--loss);
  text-decoration: none; border-bottom: 1px dotted currentColor;
}

/* ── Empty state: says what will appear, and when ───────────────────────── */

.wl__empty {
  display: grid; place-content: center; justify-items: center; gap: var(--space-3);
  min-height: 240px; padding: var(--space-6);
  text-align: center;
  border: 1px dashed var(--glass-line); border-radius: var(--radius-lg);
  background: var(--glass-bg);
}
.wl__empty svg { color: var(--ink-subtle); opacity: 0.55; }
.wl__empty-title {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
}
.wl__empty-body {
  margin: 0; max-width: 46ch; font-size: var(--text-sm); color: var(--ink-muted);
  text-wrap: pretty;
}