/* The customer feedback survey at /feedback/<token>. Its own file, prefixed to
   sort after the public sections it borrows .form/.field/.btn from and before
   the responsive overrides. One centred card on the brand dark, because the
   page is opened from an email on a phone and has one job. */
.fb {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: linear-gradient(160deg, var(--dark), var(--deeper));
}

.fb__card {
  width: 100%;
  max-width: 460px;
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

/* The logo is solid black artwork on transparency; on this white card it needs
   no filter, unlike every dark surface on the public site. */
.fb__logo { width: 116px; margin: 0 auto 18px; }

.fb__title { font-family: var(--font-serif); font-size: 27px; text-align: center; }
.fb__sub { margin-top: 10px; text-align: center; font-size: 14.5px; color: var(--grey); }

.fb__ratings { margin: 24px 0 4px; padding: 0; border: 0; }
.fb__legend { padding: 0 0 10px; font-size: 13px; font-weight: 600; }

/* The whole row is the tap target, not the 20px radio inside it. */
.fb__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.fb__rating:hover { border-color: var(--pale); background: var(--light); }
.fb__rating:has(input:checked) { border-color: var(--teal); background: var(--light); }
.fb__rating:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.fb__rating input { accent-color: var(--teal); width: 18px; height: 18px; }

.fb__stars { color: #E2A63B; letter-spacing: 1px; }
.fb__rating-label { font-size: 14px; font-weight: 600; }

.fb__given { margin-top: 20px; text-align: center; font-size: 22px; }
.fb__given-label { display: block; font-size: 14px; font-weight: 600; color: var(--grey); }

.fb__quote {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--mint);
  border-radius: var(--radius-sm);
  background: var(--light);
  font-size: 14.5px;
}

.fb__note { margin-top: 22px; font-size: 13.5px; color: var(--grey); text-align: center; }

.fb__foot {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--grey);
  text-align: center;
}
.fb__foot a { color: var(--teal); }

@media (max-width: 480px) {
  .fb { padding: 0; align-items: stretch; }
  .fb__card { max-width: none; border-radius: 0; box-shadow: none; padding: 28px 20px 40px; }
}