/* 外枠のトークン参照は components/ui/StatCard.module.css を踏襲（背景・境界線・角丸）。
   padding と値のフォントサイズはモック（d-watch-mock.jsx:694-701）のレポート用カードに合わせる。
   StatCard の `border-left: 3px solid` のアクセントは付けない
   （モックのレポートカードは数値だけを色分けする）。 */
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px;
}

.label {
  font-size: 11px;
  color: var(--tx-m);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

/* tone: 数値そのものの色 */
.ok {
  color: var(--ok);
}
.wn {
  color: var(--wn);
}
.ng {
  color: var(--ng);
}
.ac {
  color: var(--ac);
}
.pr {
  color: var(--pr);
}

.deltaRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.delta {
  font-size: 12px;
  font-weight: 600;
}

/* 前期比の意味色。tone（数値の色）とは独立 */
.good {
  color: var(--ok);
}
.bad {
  color: var(--ng);
}
.neutral {
  color: var(--tx-m);
}

.deltaLabel {
  font-size: 11px;
  color: var(--tx-m);
}

.prev {
  font-size: 11px;
  color: var(--tx-m);
  margin-top: 2px;
}