@layer components {
  .entry--gap {
    grid-template-columns: minmax(0, 1fr);
    background: var(--surface-sunken);

    & .entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  }

  .entry__action { justify-self: start; margin: var(--space-1) 0 0 calc(-1 * var(--space-3)); }

  .totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
  }
}

@layer components {
  .running-strip + .running-strip--trip { bottom: calc(76px + 68px + env(safe-area-inset-bottom)); }
  .shell:has(.running-strip + .running-strip--trip) > .page { padding-bottom: calc(228px + env(safe-area-inset-bottom)); }

  @media (width >= 1024px) {
    .running-strip + .running-strip--trip { bottom: calc(var(--space-5) + 68px); }
  }
}