/* BG-ACTIVITY-R1.03: card typography uses the 430px reference scale. */
.activity-page{background:#fff}
.activity-content{
  font-weight:500;
  padding:0.5rem clamp(0.5rem,2.6vw,1.5rem) 0.5rem;
}
.activity-tabs{
  display:flex;
  align-items:center;
  gap:0.4375rem;
  margin:0 0 0.75rem;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.activity-tabs::-webkit-scrollbar{display:none}
.activity-tabs button{
  flex:0 0 auto;
  min-width:3.625rem;
  height:1.9375rem;
  padding:0 0.8125rem;
  border:1px solid #e5edf7;
  border-radius:62.4375rem;
  background:#fff;
  color:#7c91b0;
  font-size:0.75rem;
  font-weight:500;
}
.activity-tabs button.active{
  border-color:#3f83f8;
  background:#3f83f8;
  color:#fff;
  box-shadow:0 0.3125rem 0.75rem rgba(63,131,248,.16);
}
.activity-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0.6875rem;
}
.activity-card{
  --activity-a:#4e92ff;
  --activity-b:#2f78ef;
  --activity-soft:rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
  border-radius:1.0625rem;
  color:#fff;
  background:linear-gradient(135deg,var(--activity-a),var(--activity-b));
  box-shadow:0 0.3125rem 1rem rgba(50,80,120,.12);
}
.activity-card::before,
.activity-card::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  pointer-events:none;
}
.activity-card::before{
  width:6.875rem;
  height:6.875rem;
  right:-2.5rem;
  top:-3rem;
}
.activity-card::after{
  width:4.75rem;
  height:4.75rem;
  right:3.375rem;
  bottom:-2.375rem;
}
.activity-card-orange{--activity-a:#ff9a4e;--activity-b:#ff6f31}
.activity-card-green{--activity-a:#38c89b;--activity-b:#2aa97d}
.activity-card-purple{--activity-a:#9a75f0;--activity-b:#7458d3}
.activity-card[hidden]{display:none!important}

.activity-card-main{
  position:relative;
  z-index:1;
  min-height:7.75rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 5.125rem;
  align-items:center;
  gap:0.625rem;
  padding:1rem 0.875rem 0.75rem 1rem;
}
.activity-card-copy{min-width:0}
.activity-badge{
  display:inline-flex;
  align-items:center;
  height:1.4375rem;
  padding:0 0.5rem;
  border-radius:62.4375rem;
  background:var(--activity-soft);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:.02em;
}
.activity-card h2{
  margin:0.5625rem 0 0.3125rem;
  font-size:1.0625rem;
  line-height:1.15;
  font-weight:500;
}
.activity-card p{
  max-width:15.3125rem;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:0.75rem;
  font-weight:500;
  line-height:1.55;
}
.activity-art{
  display:grid;
  place-items:center;
  width:4.875rem;
  height:4.875rem;
  justify-self:end;
  border-radius:1.5rem;
  background:rgba(255,255,255,.12);
  transform:rotate(-4deg);
}
.activity-art svg{
  width:3.0625rem;
  height:3.0625rem;
  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.94;
}
.activity-more{
  position:relative;
  z-index:1;
  width:100%;
  height:2.3125rem;
  border:0;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(11,39,79,.09);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0.9375rem 0 1rem;
  font-size:0.8125rem;
  font-weight:500;
}
.activity-more b{
  font-size:1.25rem;
  font-weight:500;
  transition:transform .16s ease;
}
.activity-card.is-open .activity-more b{transform:rotate(90deg)}
.activity-detail{
  position:relative;
  z-index:1;
  padding:0.6875rem 1rem 0.875rem;
  border-top:1px solid rgba(255,255,255,.13);
  background:rgba(10,35,71,.10);
  color:rgba(255,255,255,.87);
  font-size:0.6875rem;
  line-height:1.65;
}

@media(min-width:768px){
  .activity-content{padding-inline:1.375rem}
        .activity-tabs{margin-bottom:0.9375rem}
  .activity-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0.875rem;
  }
  .activity-card-main{min-height:9.125rem}
}
@media(min-width:1200px){
  .activity-content{padding-inline:1.75rem}
}
/* R1.173: database activities keep the existing portrait card layout. */
.activity-status{padding:1rem .25rem;color:#8798ab;font-size:.8125rem;font-weight:500;text-align:center}.activity-status[hidden]{display:none}.activity-retry{margin-inline-start:.5rem;padding:.25rem .625rem;border:1px solid #dfe7f0;border-radius:.375rem;background:#fff;color:#2584f4;font-family:inherit;font-size:.75rem;font-weight:500;line-height:1.5}.activity-art img{width:4.25rem;height:4.25rem;object-fit:contain}.activity-card-copy h2,.activity-card-copy p{overflow-wrap:anywhere}.activity-detail{overflow-wrap:anywhere;white-space:pre-wrap}.activity-detail p{max-width:none;margin:0 0 .5rem;font-size:inherit;line-height:inherit;color:inherit}.activity-detail h2{margin:.5rem 0;font-size:1.25rem;line-height:1.4}.activity-detail h3{margin:.5rem 0;font-size:1.0625rem;line-height:1.4}.activity-detail strong{font-weight:600}.activity-detail a{color:inherit;text-decoration:underline}.activity-detail .activity-rich-table{table-layout:fixed;width:100%;border-collapse:collapse;margin:.5rem 0;white-space:pre-wrap}.activity-rich-table td{min-width:0;padding:.375rem;border:1px solid currentColor;vertical-align:top;overflow-wrap:anywhere}.activity-detail img{display:inline-block;vertical-align:middle;max-width:100%;height:auto}.activity-detail .activity-rich-image{max-width:none}.activity-participate{display:inline-flex;align-items:center;justify-content:center;padding:.375rem .875rem;margin-top:.625rem;border:1px solid currentColor;border-radius:.375rem;background:transparent;color:inherit;font-size:.8125rem;font-weight:500;text-decoration:none!important;cursor:pointer}.activity-detail [data-an-indent="1"]{margin-inline-start:1.25rem}.activity-detail [data-an-indent="2"]{margin-inline-start:2.5rem}.activity-detail [data-an-indent="3"]{margin-inline-start:3.75rem}.activity-detail [data-an-indent="4"]{margin-inline-start:5rem}.activity-custom{background:var(--activity-custom);color:var(--activity-ink)}.activity-custom .activity-card-copy p{color:rgba(var(--activity-ink-rgb),.84)}.activity-custom .activity-badge,.activity-custom .activity-art{background:rgba(var(--activity-ink-rgb),.12)}.activity-custom .activity-more,.activity-custom .activity-detail{color:var(--activity-ink);background:rgba(var(--activity-ink-rgb),.05);border-top-color:rgba(var(--activity-ink-rgb),.16)}

/* Long translated labels wrap without clipping the activity card. */
.activity-badge{max-width:100%;height:auto;min-height:1.4375rem;padding:.125rem .5rem;line-height:1.4;white-space:normal;overflow-wrap:anywhere}