.time-visual {
  min-height: 0;
  background: linear-gradient(145deg, #e7ecdf, #edf0e6);
}

.time-dashboard .dash-top { padding: 14px 18px; font-size: 10px; }
.time-dashboard .dash-body { padding: 24px; }
.time-dashboard .dash-heading h2 { font-size: 23px; max-width: 280px; }
.time-dashboard .micro-label { font-size: 7px; letter-spacing: .12em; }
.time-dashboard .demo-pill { font-size: 8px; white-space: nowrap; }

.time-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 23px 0 25px;
}
.time-summary > div { display: flex; flex-direction: column; gap: 5px; }
.time-summary strong { font: 600 43px/1 'Manrope', Arial, sans-serif; letter-spacing: -2px; }
.time-summary .time-unit { font-size: 23px; font-weight: 400; letter-spacing: -1px; color: #7b8d78; }
.time-summary > div > span { color: #798775; font-size: 9px; line-height: 1.5; }
.time-week { border-radius: 20px; padding: 8px 11px; font-size: 9px; color: #536f4d; background: #edf3e5; white-space: nowrap; }
.time-week > span { margin-left: 6px; }

.time-legend { display: flex; align-items: center; gap: 15px; font-size: 8px; color: #6c7d69; }
.time-legend > span { display: flex; align-items: center; gap: 5px; }
.time-legend > span:last-child { margin-left: auto; font-size: 6px; letter-spacing: .09em; }
.time-legend i { display: inline-block; width: 13px; height: 0; border-top: 2px solid #2f6250; }
.time-legend .legend-routine { border-top-color: #d8a277; border-top-style: dashed; }

.time-chart { display: block; width: 100%; height: auto; overflow: visible; margin-top: 12px; }
.chart-grid path { fill: none; stroke: #e8ede2; stroke-width: 1; }
.chart-labels { fill: #8b9883; font: 11px 'DM Sans', Arial, sans-serif; }
.chart-guide { stroke: #c8d7bb; stroke-width: 1; stroke-dasharray: 3 5; }
.routine-line { fill: none; stroke: #d8a277; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 7; }
.freed-line { fill: none; stroke: #2f6250; stroke-width: 3.5; stroke-linecap: round; }
.time-points circle { fill: white; stroke: #2f6250; stroke-width: 2.5; }
.time-points .selected { fill: #2f6250; stroke: #dce8ce; stroke-width: 4; }

.time-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 0 -2px 0 18px; }
.time-weeks button { border: 0; background: transparent; border-radius: 6px; color: #8a9682; font-size: 9px; padding: 7px 4px; white-space: nowrap; transition: background .15s, color .15s; }
.time-weeks button:hover { color: #183f3b; background: #f4f6ef; }
.time-weeks button[aria-pressed="true"] { color: #183f3b; background: #edf3e5; font-weight: 600; }

.time-insight { display: flex; align-items: center; gap: 12px; padding: 13px; margin-top: 21px; border-radius: 7px; background: #f3f6ed; }
.time-insight > span { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; background: #e1ebd5; border-radius: 50%; color: #55744b; font-size: 18px; }
.time-insight p { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.time-insight strong { font-size: 10px; font-weight: 500; }
.time-insight p > span { font-size: 8px; color: #7c8874; line-height: 1.5; }
.time-caption { margin: 12px 0 0; color: #8b9582; font-size: 7px; line-height: 1.6; }

@media (max-width: 1050px) {
  .time-dashboard .dash-body { padding: 20px; }
  .time-dashboard .dash-top { font-size: 9px; gap: 7px; padding: 13px 15px; }
  .time-dashboard .demo-pill { font-size: 7px; padding: 5px 7px; }
  .time-dashboard .dash-heading h2 { font-size: 22px; }
  .time-summary { margin-top: 21px; margin-bottom: 21px; }
  .time-summary strong { font-size: 37px; }
}

@media (max-width: 760px) {
  .time-dashboard .dash-heading h2 { font-size: 25px; }
  .time-dashboard .dash-top { font-size: 10px; }
  .time-summary strong { font-size: 42px; }
  .time-legend { font-size: 9px; }
  .time-legend > span:last-child { font-size: 7px; }
  .time-weeks button { font-size: 10px; padding-top: 9px; padding-bottom: 9px; }
  .time-insight strong { font-size: 11px; }
  .time-insight p > span { font-size: 9px; }
  .time-caption { font-size: 8px; }
}

@media (max-width: 370px) {
  .time-dashboard .dash-body { padding: 17px; }
  .time-dashboard .dash-top { font-size: 9px; }
  .time-dashboard .dash-heading h2 { font-size: 23px; }
  .time-legend { gap: 10px; font-size: 8px; }
  .time-legend > span:last-child { font-size: 6px; }
}