.content h1 {
  color:var(--deep);
  font-size:clamp(28px,4vw,44px);
  line-height:1.5;
  margin:12px 0 20px;
}
.report-highlights {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  margin:36px 0
}
.report-highlights h2 {
  font-size:23px
}
.report-year {
  margin-top:40px;
  scroll-margin-top:100px
}
.report-year h2 small {
  font-family:inherit;
  font-size:14px;
  font-weight:400
}
.report-month {
  padding:14px 0
}
.report-month summary {
  cursor:pointer;
  font-size:18px;
  font-weight:600
}
.report-month summary span {
  margin-left:12px;
  font-size:14px;
  font-weight:400
}
.report-scroll {
  overflow-x:auto;
  margin-top:16px
}
.report-scroll table {
  width:100%;
  border-collapse:collapse;
  font-size:16px;
  min-width:520px
}
.report-scroll th,.report-scroll td {
  text-align:left;
  padding:12px 14px;
  vertical-align:top;
  border-bottom:1px solid #e5e9ed
}
.report-scroll th {
  background:#f3f5f7;
  color:var(--deep)
}
.report-scroll td small {
  display:block;
  font-size:14px;
  line-height:1.6;
  margin-top:4px;
  color:#526274
}
.report-scroll td:first-child {
  white-space:nowrap
}
.report-scroll:focus-visible {
  outline:2px solid var(--deep)
}
@media(max-width:700px) {
  .report-highlights {
  grid-template-columns:1fr;
  gap:16px
}
.report-scroll th,.report-scroll td {
  padding:10px
}
.report-year {
  margin-top:28px
}

}

.frequency-year {
  margin: 24px 0;
}
.frequency-year h4 {
  font-size: 18px;
  margin-bottom: 8px;
}
.frequency-calendar {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 4px;
}
.frequency-day {
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  background: #edf0f3;
  color: var(--deep);
}
.frequency-day.has-record {
  background: var(--deep);
  color: #fff;
  font-weight: 700;
}
@media (max-width: 800px) {
  .frequency-calendar {
    grid-template-columns: repeat(15, minmax(0, 1fr));
  }
}