/*
 * ⑧計器盤の間。Windowsのタスクマネージャー(パフォーマンスタブ)を参考に、
 * カードごとにグラフ用紙的なグリッド背景+折れ線1本+現在値の大きな数字、
 * という構成にする。ユーザー要望により「1画面に収まる」ことを優先し、
 * 他roomより横幅を広く・文字/余白を詰めている(design doc §17)。
 */

.wrap-wide {
  max-width: 1200px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.dash-card {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 10px 10px;
}

.dash-card h3 {
  margin: 0;
  font-size: 0.82rem;
  color: var(--fg-dim);
  font-weight: 600;
}

.dash-graph {
  display: block;
  width: 100%;
  margin-top: 4px;
  border-radius: 4px;
  background-color: var(--panel-bg);
  background-image:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 20px);
}

.dash-value {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.dash-stats {
  margin: 4px 0 0;
  font-size: 0.72rem;
}

.dash-stats div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
  border-bottom: 1px dashed var(--panel-border);
}

.dash-stats dt {
  color: var(--fg-dim);
}

.dash-stats dd {
  margin: 0;
  text-align: right;
}