/* カレンダーヒートマップ + 1日ページ(visual.md §6-4) */

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.cal-nav-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-main);
  border-radius: var(--r-s);
}
.cal-nav-btn:disabled { opacity: 0.3; }
.cal-title { font-size: var(--fs-h2); font-weight: 600; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: var(--sp-1);
}
.cal-weekdays span {
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--c-text-2);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: var(--r-s);
  border: 1px solid var(--c-border);
  background: none;
  color: var(--c-text-2);
  font-size: var(--fs-caption);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.cal-cell.future { opacity: 0.3; }
.cal-cell.today { box-shadow: 0 0 0 2px var(--c-accent); }
.cal-cell.heat-1 { background: var(--c-heat-1); border-color: transparent; color: var(--c-text-1); }
.cal-cell.heat-2 { background: var(--c-heat-2); border-color: transparent; color: var(--c-text-1); }
.cal-cell.heat-3 { background: var(--c-heat-3); border-color: transparent; color: var(--c-text-1); }
.cal-cell.heat-4 { background: var(--c-heat-4); border-color: transparent; color: #fff; }
.cal-cell.heat-5 { background: var(--c-heat-5); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .cal-cell.heat-4,
:root[data-theme="dark"] .cal-cell.heat-5 { color: var(--c-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-cell.heat-4,
  :root:not([data-theme="light"]) .cal-cell.heat-5 { color: var(--c-bg); }
}
.cal-blank { aspect-ratio: 1; }

.cal-rate { margin-top: var(--sp-3); }
.cal-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.cal-legend-label { font-size: var(--fs-micro); color: var(--c-text-2); margin-right: var(--sp-1); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 3px; }
.cal-legend-num { font-size: var(--fs-micro); color: var(--c-text-2); }
.cal-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  display: inline-block;
}
.cal-swatch.heat-1 { background: var(--c-heat-1); }
.cal-swatch.heat-2 { background: var(--c-heat-2); }
.cal-swatch.heat-3 { background: var(--c-heat-3); }
.cal-swatch.heat-4 { background: var(--c-heat-4); }
.cal-swatch.heat-5 { background: var(--c-heat-5); }
.cal-note { margin-top: var(--sp-2); }

/* --- 1日ページ --- */
.day-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--c-main);
  font-size: var(--fs-caption);
  min-height: 44px;
}
.day-sections { display: flex; flex-direction: column; gap: var(--sp-3); }
.day-score-row { display: flex; align-items: baseline; gap: var(--sp-2); }
.day-score-dot { width: 14px; height: 14px; border-radius: var(--r-full); align-self: center; }
.day-score-dot.s1 { background: var(--c-score-1); }
.day-score-dot.s2 { background: var(--c-score-2); }
.day-score-dot.s3 { background: var(--c-score-3); }
.day-score-dot.s4 { background: var(--c-score-4); }
.day-score-dot.s5 { background: var(--c-score-5); }
.day-score-def { margin-top: var(--sp-1); }
.day-tags { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.day-tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.day-tag-label { font-size: var(--fs-micro); color: var(--c-text-2); width: 3.5em; flex-shrink: 0; }

.day-metric-list { display: flex; flex-direction: column; }
.day-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.day-metric-row:last-child { border-bottom: none; }
.day-metric-label { font-size: var(--fs-caption); color: var(--c-text-2); }
.day-metric-val { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }

.day-med-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.day-med-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-caption);
}
.day-med-time { color: var(--c-text-2); }
.day-med-name { font-weight: 600; }
.day-med-timing { color: var(--c-text-2); font-size: var(--fs-micro); }

.day-journal { line-height: 1.8; white-space: pre-wrap; }
.day-actions { margin-top: var(--sp-4); }
.day-hint { text-align: center; }