/* ===========================================================================
   Styles for the feedback page only.
   Loaded after style.css and legal.css, which supply the tokens, the reset and
   the navy header band. Nothing in here affects the homepage or the legal
   pages.
=========================================================================== */

.fb-main {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 52px) 24px clamp(48px, 7vw, 76px);
}

/* --------------------------------------------------------------- heading */
.fb-head { margin-bottom: 26px; }

.fb-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--blue-electric);
}

.fb-title {
  margin-top: 10px;
  font-size: clamp(28px, 5.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--navy);
}

.fb-intro {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------- card */
.fb-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 10px 30px rgba(10, 18, 36, 0.05);
}

.fb-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* A fieldset carries a browser default border and padding that would fight
   the card. Reset here rather than globally, so nothing else is touched. */
.fb-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.fb-legend {
  display: block;
  padding: 0;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}

.fb-optional {
  margin-left: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.fb-rule {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}

/* ----------------------------------------------------------- the faces */
.fb-ratings {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.fb-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 4px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  /* The face and its label both inherit this, so one property moves the whole
     button between states. */
  color: #9AA5BC;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease,
    transform 0.16s ease;
}

.fb-rating:hover {
  color: var(--navy);
  border-color: rgba(10, 18, 36, 0.3);
}

.fb-rating:focus-visible {
  outline: none;
  border-color: var(--blue-electric);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}

.fb-rating.is-on {
  color: var(--blue-electric);
  border-color: var(--blue-electric);
  background: #F3F7FF;
  /* Reads as a 2px edge without changing the box metrics, so the row of five
     does not shift when one is picked. Same trick as the service cards. */
  box-shadow: inset 0 0 0 1px var(--blue-electric);
  transform: translateY(-2px);
}

.fb-face {
  width: 34px;
  height: 34px;
  display: block;
}

.fb-rating-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ select */
.fb-select-wrap { position: relative; }

.fb-select {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  padding: 13px 40px 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fb-select:focus-visible {
  outline: none;
  border-color: var(--blue-electric);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}

.fb-select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--ink-soft);
  pointer-events: none;
}

/* --------------------------------------------------------- text and input */
.fb-input,
.fb-textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fb-textarea {
  resize: vertical;
  min-height: 96px;
}

.fb-input::placeholder,
.fb-textarea::placeholder { color: #A6AFC2; }

.fb-input:focus-visible,
.fb-textarea:focus-visible {
  outline: none;
  border-color: var(--blue-electric);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}

/* ---------------------------------------------------------------- segment */
.fb-segment {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--offwhite);
}

.fb-seg {
  min-width: 96px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.fb-seg:hover { color: var(--navy); }

.fb-seg:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}

.fb-seg.is-on {
  background: var(--navy);
  color: var(--white);
}

/* ---------------------------------------------------------------- choices */
.fb-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.fb-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fb-choice:hover { border-color: rgba(10, 18, 36, 0.28); }

/* The real radio is hidden from sight but not from the accessibility tree or
   the keyboard, so :focus-visible below still lands on a visible ring. */
.fb-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.fb-choice-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #B3BDD0;
  border-radius: 50%;
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fb-choice-text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}

.fb-choice:has(input:checked) {
  border-color: var(--blue-electric);
  background: #F3F7FF;
}

.fb-choice:has(input:checked) .fb-choice-mark {
  border-color: var(--blue-electric);
  /* The dot is an inset ring rather than a pseudo element, so there is one
     fewer box to keep centred. */
  box-shadow: inset 0 0 0 4px var(--blue-electric);
}

.fb-choice:has(input:focus-visible) {
  border-color: var(--blue-electric);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}

/* :has() is everywhere current, but a browser without it must not leave the
   selection invisible. This gives the same states off the mark itself. */
@supports not selector(:has(*)) {
  .fb-choice input:checked ~ .fb-choice-mark {
    border-color: var(--blue-electric);
    box-shadow: inset 0 0 0 4px var(--blue-electric);
  }
  .fb-choice input:focus-visible ~ .fb-choice-mark {
    box-shadow: inset 0 0 0 4px var(--blue-electric), 0 0 0 3px rgba(47, 111, 237, 0.28);
  }
}

/* The soft nudge toward giving a name. A tinted border and navy bold text,
   nothing more: the option is not preselected, the anonymous option beside it
   is not greyed, shrunk or given friction, and one tap still buys privacy.

   The tint is deliberately the pale blue, not the electric one, so a nudged
   but unpicked option can never be mistaken for a picked one. Selected still
   means electric border, inset ring, tinted ground and a filled dot. */
.fb-choice-nudge {
  border-color: #CFE0FA;
}

.fb-choice-nudge .fb-choice-text {
  font-weight: 700;
  color: var(--blue-electric);
}

.fb-choice-nudge:hover { border-color: var(--blue-electric); }

/* Help text under a question, above its options. */
.fb-help {
  margin-top: -4px;
  margin-bottom: 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ------------------------------------------------------- notes and reveal */
.fb-note {
  margin-top: 11px;
  padding: 11px 14px;
  border-left: 3px solid var(--green);
  border-radius: 4px;
  background: #F1F8F3;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.fb-preview {
  margin-top: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-electric);
}

/* The only motion on the page. Height is deliberately not animated: the block
   contains a text input, and animating its height makes the caret jump. */
.fb-reveal {
  display: flex;
  flex-direction: column;
  gap: 26px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.fb-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fb-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .fb-rating,
  .fb-seg,
  .fb-choice { transition: none; }
  .fb-rating.is-on { transform: none; }
}

/* ----------------------------------------------------------------- errors */
.fb-error {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #C2331F;
}

.fb-error:empty { display: none; }

.fb-submit {
  margin-top: 2px;
  justify-content: center;
}

.fb-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ----------------------------------------------------------------- result */
.fb-result-inner {
  text-align: center;
  padding: 18px 4px 6px;
}

.fb-result-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.fb-result-inner.is-ok .fb-result-title { color: var(--green-pressed); }

.fb-result-body {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
}

.fb-result-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-electric);
}

.fb-result-back:hover { color: var(--blue-pressed); }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 560px) {
  /* Five faces across is too tight to tap below this width. The labels come
     off and the faces grow, which keeps the row readable as a scale. */
  .fb-ratings { gap: 6px; }
  .fb-rating { padding: 12px 2px; }
  .fb-rating-label { display: none; }
  .fb-face { width: 32px; height: 32px; }
  .fb-segment { display: flex; width: 100%; }
  .fb-seg { flex: 1 1 0; min-width: 0; }
}