race-result-registration {
  --rr-registration-background: var(--sby-fog, #f5f8f7);
  --rr-registration-surface: #ffffff;
  --rr-registration-text: var(--sby-evergreen, #004b41);
  --rr-registration-primary: var(--sby-aqua-green, #2a9d8f);
  --rr-registration-accent: var(--sby-bright-orange, #f15a24);
  --rr-registration-warning: var(--sby-marigold, #f4a261);
  --rr-registration-border: rgba(0, 75, 65, 0.18);
  --rr-registration-focus: var(--sby-bright-orange, #f15a24);
  --rr-registration-radius: 1rem;
  --rr-registration-max-width: 64rem;
  display: block;
  width: min(100% - 2rem, var(--rr-registration-max-width));
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 5rem);
  color: var(--rr-registration-text);
  container-type: inline-size;
}

race-result-registration *,
race-result-registration *::before,
race-result-registration *::after {
  box-sizing: border-box;
}

race-result-registration .race-result-registration {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

race-result-registration .race-result-registration__header {
  max-width: 44rem;
}

race-result-registration .race-result-registration__header[hidden],
race-result-registration [hidden] {
  display: none !important;
}

race-result-registration .race-result-registration__eyebrow {
  margin: 0 0 0.65rem;
  color: var(--color-bright-orange);
  font-size: var(--sby-copy-font-size, 12px);
  font-weight: var(--sby-copy-font-weight, 400);
  line-height: 1;
}

race-result-registration .race-result-registration__title {
  line-height: 1;
  text-transform: uppercase;
}

race-result-registration .race-result-registration__intro {
  max-width: 65ch;
  margin: 1rem 0 0;
  color: color-mix(in srgb, var(--rr-registration-text) 82%, transparent);
  font-size: var(--sby-copy-font-size, 12px);
  font-weight: var(--sby-copy-font-weight, 400);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

race-result-registration .race-result-registration__body {
  max-width: 100%;
  min-width: 0;
  min-height: 18rem;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--rr-registration-border);
  border-radius: var(--rr-registration-radius);
  background: var(--rr-registration-surface);
}

race-result-registration .race-result-registration__status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4rem;
  color: var(--rr-registration-text);
  font-size: var(--sby-copy-font-size, 12px);
  line-height: 1.4;
}

race-result-registration .race-result-registration__spinner {
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid rgba(0, 75, 65, 0.16);
  border-top-color: var(--rr-registration-accent);
  border-radius: 999px;
  animation: rr-registration-spin 800ms linear infinite;
}

race-result-registration .race-result-registration__mount {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

race-result-registration .race-result-registration__mount > * {
  max-width: 100%;
}

race-result-registration .race-result-registration__mount :where(
  div,
  form,
  fieldset,
  section,
  article,
  header,
  footer,
  nav,
  ul,
  ol,
  li,
  p
) {
  max-width: 100%;
  min-width: 0;
}

race-result-registration .race-result-registration__mount :where(table) {
  width: 100%;
  max-width: 100%;
}

race-result-registration .race-result-registration__mount :where(img, svg, canvas, iframe) {
  max-width: 100%;
}

race-result-registration .race-result-registration__mount :where([style*="width"]) {
  max-width: 100% !important;
}

race-result-registration .race-result-registration__mount :where([style*="min-width"]) {
  min-width: 0 !important;
}

race-result-registration .race-result-registration__error {
  display: grid;
  gap: 0.85rem;
  align-items: start;
  max-width: 42rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--rr-registration-warning) 55%, var(--rr-registration-border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--rr-registration-warning) 13%, white);
}

race-result-registration .race-result-registration__error p {
  margin: 0;
  line-height: 1.5;
}

race-result-registration .race-result-registration__error-title {
  color: var(--rr-registration-text);
  font-size: var(--sby-h3-font-size, 16px);
  font-weight: var(--sby-heading-font-weight, 700);
}

race-result-registration .race-result-registration__retry,
race-result-registration :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
  min-height: 44px;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rr-registration-primary);
  border-radius: 0.375rem;
  background: var(--rr-registration-primary);
  color: #ffffff;
  font: inherit;
  font-weight: var(--sby-heading-font-weight, 700);
  line-height: 1;
  cursor: pointer;
}

race-result-registration .race-result-registration__retry:hover,
race-result-registration :where(button, input[type="button"], input[type="submit"], input[type="reset"]):hover {
  background: var(--rr-registration-text);
  border-color: var(--rr-registration-text);
}

race-result-registration .race-result-registration__retry:disabled,
race-result-registration :where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

race-result-registration :where(a) {
  color: var(--rr-registration-text);
  font-weight: var(--sby-heading-font-weight, 700);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

race-result-registration :where(a:hover) {
  color: var(--rr-registration-accent);
}

race-result-registration :where(label) {
  display: inline-block;
  margin-block-end: 0.35rem;
  color: var(--rr-registration-text);
  font-weight: var(--sby-heading-font-weight, 700);
}

race-result-registration :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="search"],
  select,
  textarea
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rr-registration-border);
  border-radius: 0.375rem;
  background: #ffffff;
  color: var(--rr-registration-text);
  font: inherit;
}

race-result-registration :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="search"],
  select,
  textarea,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a
):focus-visible {
  border-color: var(--rr-registration-focus);
  outline: 3px solid rgba(241, 90, 36, 0.35);
  outline-offset: 2px;
}

@supports (outline-color: color-mix(in srgb, red 50%, transparent)) {
  race-result-registration :where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="search"],
    select,
    textarea,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a
  ):focus-visible {
    outline-color: color-mix(in srgb, var(--rr-registration-focus) 35%, transparent);
  }
}

race-result-registration :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--rr-registration-primary);
}

race-result-registration :where(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

race-result-registration :where(th, td) {
  padding: 0.5rem;
  border-block-end: 1px solid var(--rr-registration-border);
  text-align: left;
}

@container (max-width: 47.99rem) {
  race-result-registration {
    width: min(100% - 1rem, var(--rr-registration-max-width));
  }

  race-result-registration .race-result-registration__body {
    padding: 1rem;
  }

  race-result-registration :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
    width: 100%;
  }

  race-result-registration .race-result-registration__mount {
    width: 100%;
    padding-block-end: 0.25rem;
  }

  race-result-registration .race-result-registration__mount :where(
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td
  ) {
    max-width: 100%;
  }

  race-result-registration .race-result-registration__mount :where(
    td,
    th,
    label,
    input,
    select,
    textarea
  ) {
    white-space: normal !important;
  }

  race-result-registration .race-result-registration__mount :where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="search"],
    select,
    textarea
  ) {
    display: block;
  }

  race-result-registration .race-result-registration__mount :where(
    .tabs,
    .tab,
    .steps,
    .step,
    .nav,
    .navigation,
    [class*="tab"],
    [class*="Tab"],
    [class*="step"],
    [class*="Step"]
  ) {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  race-result-registration .race-result-registration__mount :where(
    .tabs a,
    .tabs button,
    .steps a,
    .steps button,
    .navigation a,
    .navigation button,
    [class*="tab"] a,
    [class*="tab"] button,
    [class*="Tab"] a,
    [class*="Tab"] button,
    [class*="step"] a,
    [class*="step"] button,
    [class*="Step"] a,
    [class*="Step"] button
  ) {
    width: auto !important;
    min-width: max-content;
  }

  race-result-registration .race-result-registration__mount :where(
    .tabs *,
    .steps *,
    .navigation *,
    [class*="tab"] *,
    [class*="Tab"] *,
    [class*="step"] *,
    [class*="Step"] *
  ) {
    max-width: none;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 47.99rem) {
    race-result-registration {
      width: min(100% - 1rem, var(--rr-registration-max-width));
    }

    race-result-registration .race-result-registration__body {
      padding: 1rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  race-result-registration .race-result-registration__spinner {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@keyframes rr-registration-spin {
  to {
    transform: rotate(1turn);
  }
}