/* ─────────────────────────────────────────────────────────────
   图表样式 · 配套 public/js/ui/charts.js
   只引用 tokens.css 的变量；SVG 里的颜色由 JS 以 var(--series-N) 写进 style，切主题不用重画。
   圆点描环用 --chart-surface（默认 = --surface）：图表放在别的底色上时，在外层覆盖它。
   ───────────────────────────────────────────────────────────── */

.chart {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden; /* 任何情况下都不把页面撑出横向滚动条 */
  border-radius: calc(var(--r-xs) / 2); /* 只为焦点环服务；再大会削到角上的轴标签 */
  outline: none;
  touch-action: pan-y; /* 横向拖动归十字准线，纵向照常滚页面 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chart:focus-visible {
  box-shadow: var(--focus-ring);
}
.chart-block {
  min-width: 0;
}
.chart__svg {
  display: block;
  overflow: visible;
}
/* 标签宽度是用 canvas 按 0 字距量的，这里保持一致，避免继承正文的负字距 */
.chart__svg text {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

/* ── 坐标轴 / 网格：退后的实线发丝 ── */
.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart-grid--base {
  stroke: var(--line-strong);
}
.chart-tick {
  fill: var(--chart-axis);
  font-size: var(--fs-micro); /* = charts.js 里量字宽用的 FONT.axis */
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.chart-value {
  fill: var(--ink);
  font-size: var(--fs-cap); /* = FONT.label */
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.chart-gap-label {
  fill: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}
.chart-ref {
  stroke: var(--ink-3);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart-ref__label {
  fill: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

/* ── 标记 ── */
.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-area {
  stroke: none;
}
.chart-dot {
  stroke-width: 2;
}
.chart-dot--pin {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-1) var(--ease-out);
}
.chart-dot--pin.is-active {
  transform: scale(1.5);
}
.chart-crosshair {
  stroke: var(--ink-3);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart-band {
  fill: var(--surface-2);
}
.chart-column {
  transition: opacity var(--dur-1) var(--ease-out);
}
.chart-columns.has-active .chart-column:not(.is-active) {
  opacity: 0.45;
}
.chart-target {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── 空状态 ── */
.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 96px;
  padding: 0 var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-sub);
  text-align: center;
}

/* ── 色标：图例用色块，tooltip 用短线 ── */
.chart-key {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.chart-key--line {
  width: 12px;
  height: 2px;
  border-radius: 1px;
}
.chart-key--dot {
  width: 8px;
  height: 8px;
  margin: 0 1px;
  border-radius: 50%;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}
.chart-legend[hidden] {
  display: none;
}
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chart-legend__label {
  color: var(--ink-2);
  font-size: var(--fs-cap);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

/* ── Tooltip（全局单例，挂在 body 上）── */
.chart-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  max-width: min(280px, calc(100vw - 16px));
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  font-family: var(--font-sans);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-1) var(--ease-out),
    visibility 0s linear var(--dur-1);
  will-change: transform;
}
.chart-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-1) var(--ease-out);
}
/* 深色下卡片本身就是 --surface，tooltip 要再浮一层才分得开 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .chart-tip {
    background: var(--surface-3);
  }
}
:root[data-theme='dark'] .chart-tip {
  background: var(--surface-3);
}
.chart-tip__title {
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: var(--fs-cap);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}
.chart-tip__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 20px;
}
.chart-tip__value {
  flex: none;
  font-size: var(--fs-sub);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chart-tip__label {
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--fs-cap);
  overflow-wrap: anywhere;
}
.chart-tip__row--total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-strong);
}
.chart-tip__note {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--fs-cap);
  overflow-wrap: anywhere;
}

/* ── 水平排行条 ── */
.chart--hbar {
  display: grid;
  gap: 14px;
  overflow: visible;
}
.chart-hbar__row {
  min-width: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.chart--hbar.has-active .chart-hbar__row:not(.is-active) {
  opacity: 0.5;
}
.chart-hbar__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 6px;
}
.chart-hbar__label {
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}
.chart-hbar__sub {
  flex: none;
  color: var(--ink-3);
  font-size: var(--fs-cap);
}
.chart-hbar__track {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 16px;
}
.chart-hbar__bar {
  flex: none;
  height: 12px;
  border-radius: 0 4px 4px 0; /* 数据端圆角，基线端直角 */
}
.chart-hbar__value {
  flex: none;
  color: var(--ink);
  font-size: var(--fs-sub);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Sparkline ── */
.chart-spark {
  display: block;
  min-width: 0;
  overflow: hidden;
}

/* ── 日历热力图 ── */
.chart--heatmap {
  overflow: visible;
  touch-action: auto; /* 要让图内部能横向滑 */
}
.chart-heat__body {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.chart-heat__days {
  flex: none;
  margin: 2px 0;
}
.chart-heat__scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.chart-heat__scroll > svg {
  margin: 2px; /* 给边缘格子的焦点描边留出位置 */
}
.chart-cell-focus {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.chart-heat__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: var(--fs-micro);
}
.chart-heat__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

/* ── 图表容器：标题 + 图/表切换 + 表格视图 ── */
.chart-figure {
  min-width: 0;
  margin: 0;
}
.chart-figure__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.chart-figure__titles {
  min-width: 0;
}
.chart-figure__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-title);
  overflow-wrap: anywhere;
}
.chart-figure__subtitle {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: var(--fs-sub);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.chart-figure__chart[hidden],
.chart-figure__table[hidden] {
  display: none;
}
.chart-figure__table {
  overflow-x: auto; /* 列太多时只在表格内部横滑 */
}
.chart-figure__note {
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--fs-cap);
  line-height: var(--lh-body);
}

.chart-toggle {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.chart-toggle__option {
  position: relative;
  min-width: 36px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: var(--fw-semibold) var(--fs-cap) / 1 var(--font-sans);
  cursor: pointer;
  appearance: none;
  transition:
    background var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}
/* 药丸本身小巧，触摸命中区向外扩到 44px */
.chart-toggle__option::after {
  content: '';
  position: absolute;
  inset: -9px 0;
}
.chart-toggle__option:hover {
  color: var(--ink);
}
.chart-toggle__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chart-toggle__option[aria-pressed='true'] {
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .chart-toggle__option[aria-pressed='true'] {
    background: var(--surface-3);
  }
}
:root[data-theme='dark'] .chart-toggle__option[aria-pressed='true'] {
  background: var(--surface-3);
}

.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sub);
}
.chart-table th,
.chart-table td {
  padding: 10px 0 10px var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: var(--fw-regular);
  text-align: left;
  vertical-align: top;
}
.chart-table th:first-child,
.chart-table td:first-child {
  padding-left: 0;
}
.chart-table thead th {
  color: var(--ink-2);
  font-size: var(--fs-cap);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.chart-table tbody th {
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}
.chart-table .is-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.chart-table .is-center {
  text-align: center;
}
.chart-table tbody tr:last-child > * {
  border-bottom: 0;
}
.chart-table tfoot > tr > * {
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  font-weight: var(--fw-semibold);
}
.chart-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 强制高对比：系列色会被系统抹掉，标记退回系统前景色，身份交给图例文字和表格视图 */
@media (forced-colors: active) {
  .chart-line {
    stroke: CanvasText !important;
  }
  .chart-column path,
  .chart-column rect,
  .chart-dot,
  .chart-cell {
    fill: CanvasText !important;
  }
  .chart-hbar__bar,
  .chart-key {
    forced-color-adjust: none;
    background: CanvasText !important;
  }
}

/* ── 样例页（#/kitchen 里的图表验收区，见 views/kitchen-charts.js）── */
.charts-demo {
  display: grid;
  gap: var(--s-7);
  color: var(--ink);
  font-family: var(--font-sans);
}
.charts-demo__section-title {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-title-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-title);
}
.charts-demo__section-hint {
  margin: 0 0 var(--s-4);
  color: var(--ink-2);
  font-size: var(--fs-sub);
}
.charts-demo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--s-4);
  align-items: start;
}
.charts-demo__card {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.charts-demo__card--wide {
  grid-column: 1 / -1;
}
.charts-demo__card--narrow {
  width: 320px;
  max-width: 100%;
}
.charts-demo__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--s-4);
}
.charts-demo__stat-label {
  color: var(--ink-2);
  font-size: var(--fs-sub);
}
.charts-demo__stat-value {
  margin: 2px 0 var(--s-2);
  font-size: var(--fs-title-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-title);
}