.member-view-profile-compass {
  padding-bottom: 32px;
}

.profile-compass-hero {
  position: relative;
  overflow: hidden;
  margin: 8px 16px 18px;
  padding: 24px 18px 18px;
  border: 1px solid rgb(255 243 229 / 14%);
  border-radius: 26px;
  color: #fff8ee;
  background: #211a16;
  box-shadow: 0 14px 28px rgb(48 30 20 / 14%);
}

.profile-compass-hero > *:not(.profile-compass-orbit) {
  position: relative;
  z-index: 1;
}

.profile-compass-hero .eyebrow {
  max-width: calc(100% - 82px);
  color: #e8a56c;
}

.profile-compass-hero h2 {
  max-width: 9.8em;
  margin: 7px 0 10px;
  color: #fff8ee;
  font-size: clamp(2rem, 9vw, 2.55rem);
  line-height: .98;
  text-wrap: balance;
}

.profile-compass-hero > p:not(.eyebrow) {
  max-width: 31ch;
  margin: 0;
  color: #d8cbc0;
  font-size: .82rem;
  line-height: 1.58;
  text-wrap: pretty;
}

.profile-compass-orbit {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 70px;
  height: 70px;
  border: 1px solid rgb(255 248 238 / 18%);
  border-radius: 50%;
}

.profile-compass-orbit::before,
.profile-compass-orbit::after,
.profile-compass-orbit i {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.profile-compass-orbit::before {
  inset: 9px;
  border: 1px solid rgb(232 165 108 / 55%);
}

.profile-compass-orbit::after {
  top: 5px;
  left: 31px;
  width: 7px;
  height: 7px;
  background: #d6f078;
}

.profile-compass-orbit i:first-child {
  right: 4px;
  bottom: 12px;
  width: 5px;
  height: 5px;
  background: #e8a56c;
}

.profile-compass-orbit i:nth-child(2) {
  left: 6px;
  bottom: 9px;
  width: 4px;
  height: 4px;
  background: #fff8ee;
}

.profile-compass-orbit span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff8ee;
}

.profile-compass-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin: 22px 0 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 248 238 / 15%);
}

.profile-compass-progress > div:first-child {
  display: flex;
  align-items: end;
  gap: 8px;
}

.profile-compass-progress strong {
  font-size: 1.7rem;
  line-height: .9;
}

.profile-compass-progress span {
  color: #c9bbb0;
  font-size: .64rem;
  line-height: 1.25;
}

.profile-compass-marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(18px, 1fr));
  gap: 5px;
  padding-bottom: 2px;
}

.profile-compass-marks i {
  height: 6px;
  border: 1px solid rgb(255 248 238 / 34%);
  border-radius: 999px;
}

.profile-compass-marks i[data-ready="true"] {
  border-color: #d6f078;
  background: #d6f078;
}

.profile-compass-primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  color: #211a16;
  background: #f4d09a;
  border-color: #f4d09a;
}

.profile-compass-list {
  margin-bottom: 14px;
}

.profile-compass-list .section-heading h2 {
  max-width: 15ch;
  text-wrap: balance;
}

.profile-compass-list ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-compass-item {
  display: grid;
  grid-template-columns: 25px 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #ddd0c1;
  border-radius: 19px;
  background: #fffaf2;
}

.profile-compass-item[data-ready="true"] {
  border-color: #c6d38d;
  background: #fbfce9;
}

.profile-compass-index {
  align-self: start;
  padding-top: 4px;
  color: #68564b;
  font-size: .62rem;
  font-weight: 800;
}

.profile-compass-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #e4d6c7;
  border-radius: 14px;
  color: #fff7ec;
  background: #6d4632;
}

.profile-compass-item[data-kind="studio"] .profile-compass-icon {
  color: #211a16;
  background: #f0b786;
}

.profile-compass-item[data-kind="reward"] .profile-compass-icon {
  color: #211a16;
  background: #d6f078;
}

.profile-compass-item[data-kind="pass"] .profile-compass-icon {
  background: #1f584b;
}

.profile-compass-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.profile-compass-copy small {
  color: #79675c;
  font-size: .64rem;
  font-weight: 800;
  line-height: 1.3;
}

.profile-compass-copy strong {
  overflow-wrap: anywhere;
  color: #2b201a;
  font-size: .83rem;
  line-height: 1.28;
}

.profile-compass-copy > span {
  overflow-wrap: anywhere;
  color: #74655c;
  font-size: .67rem;
  line-height: 1.42;
  text-wrap: pretty;
}

.profile-compass-item-action {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid #cdbfae;
  border-radius: 50%;
  color: #3f2b22;
  background: transparent;
}

.profile-compass-boundary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  margin: 0 16px;
  padding: 14px;
  border: 1px dashed #c8b7a5;
  border-radius: 18px;
  color: #6f6056;
  background: #f0e9de;
}

.profile-compass-boundary > span {
  color: #b95e31;
  font-size: 1.2rem;
}

.profile-compass-boundary p {
  margin: 0;
  font-size: .7rem;
  line-height: 1.52;
  text-wrap: pretty;
}

#coffee-match-title,
#studio-brief-title,
#studio-brief-result-title,
#reward-store-title,
#reward-target-title,
#member-card-picker-title {
  scroll-margin-top: calc(84px + env(safe-area-inset-top));
}

@media (max-width: 339px) {
  .profile-compass-hero {
    margin-inline: 12px;
  }

  .profile-compass-orbit {
    width: 62px;
    height: 62px;
  }

  .profile-compass-item {
    grid-template-columns: 21px 40px minmax(0, 1fr) 44px;
    gap: 7px;
    padding-inline: 8px;
  }

  .profile-compass-icon {
    width: 40px;
    height: 40px;
  }
}

@media (forced-colors: active) {
  .profile-compass-hero,
  .profile-compass-item,
  .profile-compass-icon,
  .profile-compass-item-action,
  .profile-compass-boundary,
  .profile-compass-marks i {
    border: 1px solid CanvasText;
  }

  .profile-compass-item[data-ready="true"],
  .profile-compass-marks i[data-ready="true"] {
    background: Highlight;
    color: HighlightText;
  }
}