/* ==========================================================================
   Satisfaction survey — the page a firm's principal contact answers.

   The only part of the app seen by someone with no account, on whatever device
   the email was opened on. So: one card, centred, no navigation, and a scale
   that stays usable when five 64px faces no longer fit across the screen.
   ========================================================================== */
/* The app locks `body { overflow: hidden }`, so this is the element that
   scrolls. It takes the viewport's height exactly — `min-height` would let it
   grow past the clip instead, putting the submit button somewhere unreachable
   on a short window. */
.survey-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: var(--space-8) var(--space-4);
  background: var(--color-canvas);
  overflow-y: auto;
}

/* `overflow: hidden` so the header band takes the card's top corners with it. */
.survey-card {
  width: 100%;
  max-width: 560px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.survey-card--centred {
  text-align: center;
}

/* The logo is a white mark, so it needs a dark ground — the same gradient the
   sign-in page stands it on. Full-bleed rather than inset: it is the brand
   saying who is asking, not a heading. */
.survey-card__header {
  padding: var(--space-6);
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-secondary-dark));
  text-align: center;
}

.survey-card__logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto;
}

.survey-card__body {
  padding: var(--space-8) var(--space-10) var(--space-10);
}

.survey-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xxlarge);
  color: var(--color-primary-dark);
  text-align: center;
}

.survey-card__blurb {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-large);
  line-height: 1.6;
  color: var(--color-text);
  text-align: center;
}

/* The score, played back on the thank-you screen. Large enough to be the whole
   confirmation on its own — it is what they just clicked, made bigger. */
.survey-card__answer {
  margin: 0 0 var(--space-4);
  font-size: 64px;
  line-height: 1;
}

.survey-card__note {
  margin: var(--space-6) 0 0;
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

/* --- The five faces ------------------------------------------------------ */
.survey-scale {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
}

.survey-scale__legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* Wraps rather than shrinking: five faces small enough to fit a narrow phone
   are five faces too small to tap accurately. */
.survey-scale__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.survey-scale__option {
  flex: 0 0 auto;
}

/* The radio itself is the state; the label is the control. Kept in the
   document (rather than display: none) so it stays reachable by keyboard and
   announced by a screen reader. */
.survey-scale__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.survey-scale__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 84px;
  padding: var(--space-3) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base),
    transform var(--transition-fast), box-shadow var(--transition-base);
}

.survey-scale__face:hover {
  border-color: var(--color-primary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.survey-scale__glyph {
  font-size: 32px;
  line-height: 1;
}

.survey-scale__label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}

/* Filled rather than outlined, matching the firm record's card: the one answer
   among five, not five equal options. */
.survey-scale__input:checked + .survey-scale__face {
  border-color: var(--color-primary-green);
  background: var(--tint-green-16);
  box-shadow: var(--shadow-glow-green);
}

.survey-scale__input:checked + .survey-scale__face .survey-scale__label {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* The label carries the focus ring, since the input it belongs to is invisible
   — without this, tabbing through the scale shows nothing at all. */
.survey-scale__input:focus-visible + .survey-scale__face {
  outline: none;
  border-color: var(--color-primary-green);
  box-shadow: var(--focus-ring);
}

/* --- Comment and submit --------------------------------------------------- */
.survey-form__field {
  margin-bottom: var(--space-6);
}

.survey-form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-medium);
  font-family: var(--font-family-bold);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.survey-form__input {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--font-size-medium);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  resize: vertical;
}

.survey-form__input:focus {
  outline: none;
  border-color: var(--color-primary-green);
  box-shadow: var(--focus-ring);
}

.survey-form__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.survey-form__error {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-medium);
  color: var(--color-danger);
  text-align: center;
}

.survey-form__submit {
  width: 100%;
}

@media (max-width: 480px) {
  .survey-card__body {
    padding: var(--space-6);
  }

  .survey-scale__face {
    width: 72px;
  }
}