.overview-add-card{display:flex;flex-direction:column;gap:12px}
.overview-add-button{flex:1;min-height:68px;width:100%;justify-content:flex-start;padding:0 14px;font-size:14px}
.overview-add-button .add-symbol{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#e9f0e7;color:#557353;font-size:18px}
.overview-add-button.exercise .add-symbol{background:#f8eee5;color:#c9885a}
.overview-add-button span:last-child{flex:1;text-align:left}
.movement-progress{height:5px;margin-top:12px}
.movement-fill{background:var(--orange)}
.planned-overview-row{display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 9px;border:1px dashed var(--line);border-radius:9px;background:#fafbf8;opacity:.58}
.planned-overview-symbol{width:27px;height:27px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--orange-pale);color:var(--orange);font-size:13px;font-weight:700}
.planned-overview-copy{min-width:0;flex:1}
.planned-overview-copy strong{display:block;font-size:10px}
.planned-overview-copy span{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.planned-overview-row .small-link{font-size:10px}
body.dark-mode .planned-overview-row{background:#202a24}

/* Give the Overview macro summary a full-width, compact layout on phones. */
@media(max-width:760px){
  .overview-macro-card{grid-column:1 / -1}
  .overview-macro-card .macro-layout{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:16px;padding-top:14px}
  .overview-macro-card .donut{width:72px;height:72px}
  .overview-macro-card .donut:before{inset:8px}
  .overview-macro-card .donut-center{font-size:13px}
  .overview-macro-card .donut-center span{font-size:8px}
  .overview-macro-card .legend{min-width:0;gap:9px}
  .overview-macro-card .legend-row{min-width:0;gap:8px;font-size:10px}
  .overview-macro-card .legend-row strong{white-space:nowrap;font-size:10px}
}