.residentExperienceMvp {
  margin: 22px 0 0;
  color: #283a35;
}

.residentExperienceAnsweredBadge[hidden] {
  display: none;
}

.residentExperienceSummary,
.residentExperienceEntry,
.residentExperiencePanel {
  border: 1px solid #d9e3df;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(40, 58, 53, .07);
}

.residentExperienceSummary {
  margin: 22px 0 18px;
  padding: clamp(20px, 3vw, 28px);
}

.residentExperienceSummaryHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.residentExperienceSummary h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  line-height: 1.5;
}

.residentExperienceSampleBadge,
.residentExperienceAnsweredBadge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

.residentExperienceSampleBadge {
  border: 1px solid #ddd8cb;
  background: #faf7ef;
  color: #776b54;
}

.residentExperienceAnsweredBadge {
  border: 1px solid #a9cec4;
  background: #eff8f5;
  color: #2b6b5d;
}

.residentExperienceSummaryMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px;
}

.residentExperienceSummaryMeta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f3f6f4;
  color: #66746e;
  font-size: .72rem;
  font-weight: 650;
}

.residentExperienceInsights {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e4e9e7;
  border-radius: 18px;
  background: #e4e9e7;
}

.residentExperienceInsights article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 15px 16px;
  background: #fff;
}

.residentExperienceInsights article > div:first-child {
  display: grid;
  gap: 3px;
}

.residentExperienceInsights strong {
  font-size: .9rem;
}

.residentExperienceInsights article span {
  color: #63716b;
  font-size: .8rem;
}

.residentExperienceMeter {
  display: grid;
  grid-template-columns: repeat(5, 12px);
  gap: 5px;
}

.residentExperienceMeter i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e2e8e5;
}

.residentExperienceMeter i.is-on {
  background: #4d9f8d;
}

.residentExperienceMeter i.is-mid {
  background: #b7d7cf;
}

.residentExperienceSummaryNote {
  margin: 15px 0 0;
  color: #6a7772;
  font-size: .78rem;
  line-height: 1.65;
}

.residentExperienceSummaryAction {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2d7566;
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
}

.residentExperienceSummaryAction::after {
  content: ' →';
}

.residentExperienceEntry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
}

.residentExperienceEntryTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.residentExperienceEntryTop .residentExperienceEyebrow {
  margin: 0;
}

.residentExperienceEntry h2 {
  margin: 0 0 7px;
  font-size: clamp(1.18rem, 2.8vw, 1.45rem);
}

.residentExperienceEntry p:not(.residentExperienceEyebrow) {
  margin: 0;
  color: #5d6c66;
}

.residentExperienceStart {
  display: grid;
  gap: 2px;
  min-width: 150px;
  min-height: 56px;
  align-content: center;
  padding: 11px 18px;
  border: 1px solid #283a35;
  border-radius: 999px;
  background: #283a35;
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.residentExperienceStart small {
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 600;
}

.has-saved-response .residentExperienceStart {
  border-color: #75ad9f;
  background: #eef7f4;
  color: #28594f;
}

.has-saved-response .residentExperienceStart small {
  color: #668179;
}

.residentExperiencePanel {
  padding: clamp(20px, 3vw, 30px);
}

.residentExperiencePanel[hidden],
.residentExperienceEntry[hidden] {
  display: none;
}

.residentExperienceHeader {
  margin-bottom: 24px;
}

.residentExperienceHeaderTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.residentExperienceClose {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d8e0dc;
  border-radius: 999px;
  background: #fff;
  color: #52615b;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.residentExperienceEyebrow {
  margin: 0 0 8px;
  color: #2f8f7d;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.residentExperienceMvp h2 {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.45;
}

.residentExperienceMvp p {
  max-width: 66ch;
  line-height: 1.75;
}

.residentExperienceProgress {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0 0 26px;
}

.residentExperienceProgress span {
  height: 5px;
  border-radius: 999px;
  background: #e6ece9;
}

.residentExperienceProgress span.is-active,
.residentExperienceProgress span.is-done {
  background: #2f8f7d;
}

.residentExperienceProgress small {
  margin-left: 4px;
  color: #687770;
  font-size: .76rem;
  font-weight: 700;
}

.residentExperienceMvp form,
.residentExperienceSteps {
  display: grid;
  gap: 18px;
}

.residentExperienceMvp fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.residentExperienceMvp legend {
  margin-bottom: 16px;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.65;
}

.residentExperienceStep[hidden] {
  display: none;
}

.residentExperienceStep {
  animation: residentExperienceStepIn .24s ease both;
}

@keyframes residentExperienceStepIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.residentExperienceRelationGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.residentExperienceRelationGrid label,
.residentExperienceScale label {
  position: relative;
  cursor: pointer;
}

.residentExperienceRelationGrid input,
.residentExperienceScale input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.residentExperienceRelationGrid span {
  display: grid;
  gap: 5px;
  min-height: 92px;
  align-content: center;
  padding: 14px 15px;
  border: 1px solid #d7e0dc;
  border-radius: 16px;
  background: #fbfcfb;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.residentExperienceRelationGrid strong {
  font-size: .94rem;
  line-height: 1.45;
}

.residentExperienceRelationGrid small {
  color: #6d7b75;
  font-size: .76rem;
  line-height: 1.5;
}

.residentExperienceRelationGrid label:hover span {
  border-color: #9ec8bd;
  transform: translateY(-1px);
}

.residentExperienceRelationGrid input:checked + span {
  border-color: #7db9aa;
  background: #f0f8f5;
  box-shadow: inset 0 0 0 1px #7db9aa, 0 7px 16px rgba(47, 143, 125, .08);
}

.residentExperienceRelationGrid input:focus-visible + span,
.residentExperienceScale input:focus-visible + span {
  outline: 3px solid rgba(47, 143, 125, .28);
  outline-offset: 3px;
}

.residentExperienceScale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border-radius: 18px;
  background: #f3f6f4;
}

.residentExperienceScale span {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  font-size: 1rem;
  font-weight: 750;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.residentExperienceScale label:hover span {
  background: #fff;
  transform: translateY(-1px);
}

.residentExperienceScale input:checked + span {
  background: #dcefe9;
  color: #20483f;
  border-color: #8bc1b4;
  box-shadow: 0 5px 12px rgba(47, 143, 125, .12);
}

.residentExperienceEnds {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-top: 9px;
  color: #6c7974;
  font-size: .75rem;
  line-height: 1.45;
}

.residentExperienceEnds span:nth-child(2) {
  text-align: center;
}

.residentExperienceEnds span:last-child {
  text-align: right;
}

.residentExperienceActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.residentExperienceBack,
.residentExperienceSubmit {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.residentExperienceBack {
  border: 1px solid #ced9d5;
  background: #fff;
  color: #42524c;
}

.residentExperienceSubmit {
  margin-left: auto;
  border: 1px solid #283a35;
  background: #283a35;
  color: #fff;
}

.residentExperienceBack:hover,
.residentExperienceSubmit:hover,
.residentExperienceStart:hover,
.residentExperienceClose:hover,
.residentExperienceSummaryAction:hover {
  transform: translateY(-1px);
}

.residentExperienceStatus {
  min-height: 1.2em;
  margin: 0;
  color: #687770;
  font-size: .82rem;
  font-weight: 600;
}

.residentExperienceStatus[data-state="saved"] {
  color: #2f6f60;
  font-size: .88rem;
  font-weight: 750;
}

.residentExperienceStatus[data-state="error"] {
  color: #8a3f36;
}

.residentExperienceNote {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef1ef;
  color: #6c7974;
  font-size: .82rem;
}

/* 2026-10-17: restrained interaction polish. */
.residentExperiencePanel {
  background: linear-gradient(180deg, #ffffff 0%, #fdfefd 100%);
}

.residentExperienceProgress {
  gap: 9px;
  margin-bottom: 28px;
}

.residentExperienceProgress span {
  height: 7px;
  background: #edf1ef;
  box-shadow: inset 0 0 0 1px rgba(40, 58, 53, .025);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.residentExperienceProgress span.is-done {
  background: #9ac9bd;
}

.residentExperienceProgress span.is-active {
  background: #2f8f7d;
  box-shadow: 0 2px 7px rgba(47, 143, 125, .14);
}

.residentExperienceRelationGrid {
  gap: 12px;
}

.residentExperienceRelationGrid span {
  position: relative;
  min-height: 100px;
  padding: 16px 42px 16px 17px;
  border-color: #dce5e1;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(40, 58, 53, .04);
}

.residentExperienceRelationGrid span::after {
  content: '✓';
  position: absolute;
  top: 16px;
  right: 15px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #cfdbd7;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: .74rem;
  font-weight: 850;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.residentExperienceRelationGrid label:hover span {
  border-color: #a9cdc4;
  background: #fcfefd;
  box-shadow: 0 6px 18px rgba(47, 143, 125, .065);
  transform: translateY(-1px);
}

.residentExperienceRelationGrid input:checked + span {
  border-color: #78b5a6;
  background: #f2f9f7;
  box-shadow: inset 0 0 0 1px rgba(47, 143, 125, .12), 0 5px 15px rgba(47, 143, 125, .07);
  transform: none;
}

.residentExperienceRelationGrid input:checked + span::after {
  border-color: #2f8f7d;
  background: #2f8f7d;
  color: #fff;
}

.residentExperienceScale {
  grid-template-columns: repeat(5, minmax(52px, 76px));
  justify-content: space-between;
  gap: clamp(8px, 1.8vw, 18px);
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
}

.residentExperienceScale span {
  min-height: 52px;
  border: 1px solid #dce4e1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(40, 58, 53, .045);
  color: #2f403a;
  font-size: 1rem;
}

.residentExperienceScale label:hover span {
  border-color: #a8cfc5;
  background: #f9fcfb;
  box-shadow: 0 5px 14px rgba(47, 143, 125, .07);
  transform: translateY(-1px);
}

.residentExperienceScale input:checked + span {
  border-color: #4d9f8d;
  background: #eef8f5;
  color: #24584d;
  box-shadow: inset 0 0 0 1px rgba(47, 143, 125, .16), 0 4px 12px rgba(47, 143, 125, .08);
  transform: none;
}

.residentExperienceEnds {
  margin-top: 10px;
  padding: 0 2px;
}

.residentExperienceControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef1ef;
}

.residentExperienceStorageNote {
  flex-basis: 100%;
  margin: 0;
  color: #6c7974;
  font-size: .78rem;
  line-height: 1.65;
}

.residentExperienceStorageNote[hidden],
.residentExperienceDelete[hidden] {
  display: none;
}

.residentExperienceDelete {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #75817d;
  font: inherit;
  font-size: .76rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #c9d3cf;
  text-underline-offset: 3px;
  cursor: pointer;
}

.residentExperienceDelete:hover {
  color: #4f625b;
  text-decoration-color: #90aaa1;
}

@media (max-width: 700px) {
  .residentExperienceSummary,
  .residentExperienceEntry,
  .residentExperiencePanel {
    border-radius: 20px;
  }

  .residentExperienceSummary {
    padding: 20px 18px;
  }

  .residentExperienceSummaryHead {
    display: grid;
    gap: 10px;
  }

  .residentExperienceSampleBadge {
    justify-self: start;
  }

  .residentExperienceInsights article {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .residentExperienceMeter {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .residentExperienceMeter i {
    width: auto;
    height: 7px;
    border-radius: 999px;
  }

  .residentExperienceEntry {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 18px;
  }

  .residentExperienceStart {
    width: 100%;
  }

  .residentExperiencePanel {
    padding: 20px 18px;
  }

  .residentExperienceHeaderTop {
    gap: 10px;
  }

  .residentExperienceClose {
    min-height: 36px;
    padding: 7px 11px;
  }

  .residentExperienceRelationGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .residentExperienceRelationGrid span {
    min-height: 0;
    padding: 15px 42px 15px 16px;
    border-radius: 17px;
  }

  .residentExperienceRelationGrid span::after {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
  }

  .residentExperienceScale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .residentExperienceScale span {
    min-height: 48px;
    border-radius: 13px;
  }

  .residentExperienceEnds {
    font-size: .7rem;
  }
}