/* ==========================================================================
   Visitor feedback (snippets/components/feedback.php, assets/js/feedback.js)
   A panel fixed in the corner, opened from the footer on every page or, on
   case studies, from a pill shown once the visitor is a quarter of the way
   down. Rows stack: question above its answers.
   ========================================================================== */

.feedback {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 700; /* under the header menu, the hover label and the page transition */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(var(--space-3));
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.feedback[hidden],
[data-feedback-footer][hidden] { display: none; }
.feedback.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* The pill */
.feedback__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-inverse);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}
.feedback__chip:hover { background: var(--color-primary-hover); }
.feedback__chip-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  opacity: 0.7;
}
.feedback.is-open .feedback__chip { display: none; }

/* The panel */
.feedback__panel {
  display: none;
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.12);
}
.feedback.is-open .feedback__panel { display: block; }

.feedback__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.feedback__meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-text-muted);
}
.feedback__hide {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.feedback__hide:hover { color: var(--color-text); }
.feedback__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.feedback__close:hover { background: var(--color-placeholder); }
.feedback__hide[hidden] + .feedback__close { margin-left: auto; } /* thank-you view: no "Hide" */
.feedback__title {
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-4);
}

/* One question per row: the question, then its three answers and "saved".
   The legend is floated so it lays out like any flex item. */
.feedback__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}
.feedback__row:last-child { border-bottom: 1px solid var(--color-border); }
.feedback__question {
  float: left;
  flex-basis: 100%;
  padding: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.feedback__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.feedback__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.feedback__option span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.feedback__option:hover span { border-color: var(--color-text); }
.feedback__option input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-inverse);
}
.feedback__option input:focus-visible + span {
  outline: 2px dotted var(--color-accent);
  outline-offset: 4px;
}
.feedback__saved {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-text-muted);
}

.feedback__note {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
/* Back to the recap, while changing answers after finishing */
.feedback__back { margin-top: var(--space-4); }
.feedback__back[hidden] { display: none; }
.feedback__panel .button { min-height: 2.75rem; padding-inline: var(--space-5); font-size: var(--text-caption); }

/* Confirmation view: the mark and "sent" first, the answers as one quiet line */
.feedback__done[hidden] { display: none; }
.feedback__check {
  display: block;
  margin-bottom: var(--space-4);
  fill: none;
  stroke: var(--color-available); /* the availability dot's green: "this went through" */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback__sent {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--leading-heading);
  outline: none;
}
.feedback__thanks {
  margin-top: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}
.feedback__recap {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.feedback__recap-answers { color: var(--color-text); font-weight: var(--weight-medium); }
.feedback__edit {
  margin-left: var(--space-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--color-text);
}
.feedback__edit:hover { color: var(--color-text-muted); }
.feedback__contact { margin-top: var(--space-5); }

/* Switching views (feedback.js): the leaving view sinks into the 4px dot grid,
   the panel eases to its new height, the arriving one comes through the dots
   (the site's resolve, base.css .bp-dots). Lite tier flickers instead;
   reduced motion swaps at once. */
.feedback__view.is-leaving,
.feedback__view.is-arriving {
  -webkit-mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 0.5px)) 0 0 / 4px 4px;
          mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 0.5px)) 0 0 / 4px 4px;
}
.feedback__view.is-leaving { --dot: 3px; }
.feedback__view.is-leaving.is-on { --dot: 0px; transition: --dot 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.feedback__view.is-arriving.is-on { --dot: 3px; transition: --dot 0.5s cubic-bezier(0.5, 0, 0.75, 0); }
/* The check draws itself once the view has come through: circle, then tick */
.feedback__done.is-arriving .feedback__check :is(circle, path) {
  stroke-dasharray: 1;
  animation: feedback-draw 0.45s var(--ease-out) 0.3s both;
}
.feedback__done.is-arriving .feedback__check path { animation-duration: 0.3s; animation-delay: 0.6s; }
@keyframes feedback-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }