/* Optional, visibly labelled example activity. No card exists on the default page. */
.bds-activity {
  position: fixed;
  z-index: 45;
  left: 24px;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  width: min(370px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: start;
  gap: 11px;
  padding: 16px 12px 16px 15px;
  border: 1px solid #d1ddc9;
  border-radius: 20px;
  background: #f8f6ed;
  color: #163b2f;
  box-shadow: 0 10px 35px #10221c24, 0 2px 6px #10221c12;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease-out, transform 220ms cubic-bezier(.22, 1, .36, 1);
  font-family: inherit;
  pointer-events: none;
}
.bds-activity[hidden] { display: none !important; }
.bds-activity.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bds-activity__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 51px;
  background: #d7ecc7;
  border-radius: 15px 15px 20px 20px;
}
.bds-activity__icon svg { display: block; width: 40px; height: 40px; }
.bds-activity__tooth { fill: #fffdf3; stroke: #163b2f; stroke-width: 1.6; }
.bds-activity__gold { fill: #e8b83d; }
.bds-activity__face { fill: none; stroke: #163b2f; stroke-width: 2.4; stroke-linecap: round; }
.bds-activity .bds-activity__badge {
  display: inline-block;
  margin: 0 0 7px;
  color: #284b30;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}
.bds-activity .bds-activity__name {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.bds-activity .bds-activity__detail { margin: 0; font-size: 14px; line-height: 1.35; }
.bds-activity .bds-activity__note { margin: 6px 0 0; color: #526452; font-size: 11.5px; line-height: 1.4; }
.bds-activity__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -5px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e5eadf;
  color: #163b2f;
  font: 400 25px/1 Arial, sans-serif;
  cursor: pointer;
}
.bds-activity__close:focus-visible { outline: 3px solid #ae761c; outline-offset: 3px; }
.bds-activity--instant { transition: none; transform: none; }
html.motion-off .bds-activity,
body.motion-paused .bds-activity { transition: none; transform: none; }
@media (max-width: 640px) {
  .bds-activity {
    left: 16px;
    right: 16px;
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    width: auto;
    grid-template-columns: 38px minmax(0, 1fr) 44px;
    gap: 9px;
    padding: 14px 10px 14px 12px;
    border-radius: 18px;
  }
  .bds-activity__icon { width: 38px; height: 47px; }
  .bds-activity__icon svg { width: 35px; height: 35px; }
  .bds-activity .bds-activity__name { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .bds-activity { transition: none; transform: none; }
}