/*
 * Additions to the extracted reference stylesheet.
 *
 * styles.css is generated from `GTM Diagnostic.html` and must not be edited by
 * hand. This file holds styles for the elements the reference had no equivalent
 * of: inline validation messages (S3) and the forward button (S2). Everything
 * here borrows the reference's own custom properties so it reads as one design.
 */

.field-error,
.form-error {
  margin: 6px 0 0;
  color: #a33520;
  font-size: 13px;
  font-weight: 650;
}

.form-error {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid #eccec6;
  border-radius: 12px;
  background: var(--accent-soft);
}

.field input[aria-invalid='true'] {
  border-color: #d8a99d;
}

/* The forward twin of .back — same affordance, mirrored. */
.card-footer .next {
  margin-left: auto;
}

.gate-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* The degraded result (§8) is injected here when storage was unavailable. */
#resultMount:empty {
  display: none;
}

/*
 * `.topbar-restart` was written for the questions screen, where it is a
 * <button>. The result page reuses the class on an <a>, and an anchor does not
 * behave like a button in two ways the reference never had to handle: the
 * default underline shows through what is drawn as a button, and `min-height`
 * stretches the box without centring the label inside it, so the text sat 3px
 * from the top of a 34px box and 17px from the bottom. A button centres its own
 * content; an anchor has to be told to.
 */
.topbar-restart {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
 * The findings list is inside `.result-panel .findings-panel`, so it is hit by
 * both `.findings-panel li` (font-size 15px) and, later in the same file, the
 * generic `.result-panel li` (margin 9px 0, font-size 14px). Equal specificity,
 * so the generic rule wins by source order and silently overrides the one that
 * was written for this list.
 *
 * Two visible consequences. The list is a grid with `gap: 9px`, and grid items
 * do not collapse margins, so 9 + 9 + 9 renders as 27px between bullets. And
 * the closing "...were stronger" line sits nearer the last bullet than the
 * bullets sit to each other, which makes it read as another list item.
 *
 * Restoring the intended values fixes both: the gap alone spaces the bullets,
 * and `.findings-strong`'s own 15px top margin then clearly exceeds it.
 */
.findings-panel li {
  margin: 0;
  font-size: 15px;
}

/*
 * The same collision, one level up. `.result-panel p { margin: 0 }` outranks
 * both `.findings-lede` and `.findings-strong` on specificity, not just source
 * order, so the 12px under the lede and the 15px above the closing line were
 * being zeroed. That is what made the closing line touch the last bullet and
 * read as another item in the list. Restored at a specificity that wins.
 */
.result-panel .findings-lede {
  margin: 0 0 12px;
}

.result-panel .findings-strong {
  margin: 15px 0 0;
}

/*
 * The way back into the questions from the gate. It borrows .back from the card
 * footer, and only needs placing: outside the form grid, under the submit, and
 * quiet enough that it never competes with it.
 */
.gate-back {
  margin: 14px 0 0 -10px;
}

/*
 * Below 820px the reference rail truncates each step name to one line. That was
 * safe when every name was one short word, but "Customer insights" becomes
 * "Custome…" — on the step the reader is standing on when they start. Two lines
 * instead, with the height reserved so the five progress bars stay level even
 * when only some names wrap.
 */
@media (max-width: 820px) {
  .stage > span:nth-child(2) {
    overflow: hidden;
    overflow-wrap: break-word;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.25;
    min-height: 2.5em;
  }
}