/* Scoped styles for the additional overview; uses the existing light/dark theme. */
.st-overview {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background: var(--bs-body-bg);
  overflow: hidden;
}
.st-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
}
.st-order { width: auto; }
.st-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0;
  padding: 0 1rem .75rem;
}
.st-filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  cursor: pointer;
}
.st-status { margin: 0; padding: .6rem 1rem; background: var(--bs-tertiary-bg); }
.st-body { max-height: 28rem; overflow-y: auto; padding: .5rem 1rem; }
.st-days, .st-events { list-style: none; padding: 0; margin: 0; }
.st-day { display: grid; grid-template-columns: 7rem minmax(0, 1fr); }
.st-date { font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 600; padding-top: .7rem; }
.st-day-events { border-left: 2px solid var(--bs-border-color); padding: .5rem 0 .5rem 1rem; position: relative; }
.st-day-events::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 3px var(--bs-body-bg);
  position: absolute;
  top: .9rem;
  left: -.36rem;
}
.st-day-events > summary { font-size: .8rem; cursor: pointer; padding: .15rem 0; }
.st-count { font-weight: 600; margin-right: .65rem; }
.st-day-summary { color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.st-event { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; font-size: .8rem; }
.st-badge { border-radius: .25rem; padding: .1rem .35rem; font-size: .7rem; font-weight: 600; flex-shrink: 0; }
.st-milestone .st-badge { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.st-sighting .st-badge { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.st-kev .st-badge { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.st-other .st-badge { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }
.st-event-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.st-source { display: block; color: var(--bs-secondary-color); font-size: .75rem; }
.st-time { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; flex-shrink: 0; font-size: .7rem; }
.st-detail { color: var(--bs-secondary-color); font-size: .75rem; }
.st-detail summary { cursor: pointer; }
.st-detail p { margin: .3rem 0; white-space: pre-wrap; }
.st-gap { color: var(--bs-secondary-color); font-size: .7rem; padding: .15rem 0 .15rem 8rem; }
.st-more { list-style: none; padding: .5rem 0 .25rem 8rem; }
@media (max-width: 575px) {
  .st-header { padding: .75rem; }
  .st-body { padding: .5rem .75rem; }
  .st-day { grid-template-columns: 5.8rem minmax(0, 1fr); }
  .st-date { font-size: .7rem; }
  .st-day-events { padding-left: .6rem; }
  .st-gap, .st-more { padding-left: 6.5rem; }
  .st-event { flex-wrap: wrap; gap: .3rem; }
  .st-event-body { flex-basis: 65%; }
  .st-time { margin-left: auto; }
}