/* "How we connected you" sheet (VIA-1729). It stays out of design/theme.css and
 * the site bundle, which keeps the homepage CSS small. The Rails bundle imports
 * it, and the Zola how-ranking-works page links it for its example sheet, so
 * both draw the sheet from this one file. */
@layer components {
  /* The match explainer is long and informational: the head (title and
   * close) and the foot (the correction actions) stay put while the body
   * between them scrolls, so both are always in reach. The foot steps up a
   * surface tier instead of drawing a rule. */
  .vc-dialog--explainer {
    max-width: 32.5rem;
    padding: 0;
    overflow: hidden;
  }

  .vc-dialog--explainer[open] {
    display: flex;
    flex-direction: column;
  }

  .vc-dialog__frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .vc-dialog--explainer .vc-dialog__head {
    margin: 0;
    padding: 1.25rem 1.5rem 0.75rem;
  }

  .vc-dialog__head--person {
    align-items: center;
  }

  .vc-dialog__head--person .vc-dialog__title {
    padding-top: 0;
    font-size: 1.125rem;
  }

  .vc-dialog__head--person > .vc-close {
    margin-top: 0;
  }

  .vc-dialog__avatar {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 12px;
    font-weight: var(--vc-weight-heading);
  }

  /* One fit row: icon, label and fit word on a line, the four segments beneath. */
  .vc-fit-row {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.375rem;
  }

  .vc-fit-segments {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
  }

  .vc-fit-segment {
    height: 0.5rem;
    border-radius: 3rem;
    background: var(--vc-sand);
  }

  .vc-fit-segment.is-on {
    background: var(--vc-primary);
  }

  .vc-dialog__scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 1.5rem 1.25rem;
  }

  .vc-dialog__foot {
    padding: 1rem 1.5rem 1.25rem;
    background: var(--vc-surface-high);
  }

  .vc-dialog__foot .vc-dialog-actions {
    margin-top: 0;
  }

  .vc-dialog__foot .vc-dialog-actions .vc-action {
    padding-inline: 1rem;
  }

  @media (max-width: 39.99rem) {
    .vc-dialog--explainer {
      max-height: 92dvh;
      padding-bottom: 0;
    }

    .vc-dialog__foot {
      padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
  }
}