/* Later adjustments kept separate so the existing visual system stays intact. */
.profile > span {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.profile > span.has-photo { color: transparent; }

.avatar-large {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

nav { justify-content: space-evenly; }

/* Keep the primary action above the fixed navigation bar on touch devices. */
.add-button {
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
}

.section-head { gap: 8px; }

.section-head h3 { white-space: nowrap; }

.date-switcher {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #e7eeea;
  border-radius: 11px;
  background: #f7faf8;
}

.date-switcher button {
  min-height: 31px;
  padding: 4px 8px;
  color: #527068;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
}

.date-switcher #selected-date {
  min-width: 48px;
  padding-inline: 5px;
  color: #47645c;
  font-size: 11px;
}

.date-switcher button:disabled { color: #c5d0cb; cursor: not-allowed; }

#date-picker { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 360px) {
  .section-head h3 { font-size: 15px; }
  .date-switcher button { padding-inline: 5px; }
  .section-head > #clear-records { font-size: 10px; padding: 0; }
}