/* Vertical guide: tab column edge, full card height, gutter offset; tab-title rule meets the guide. */

.create-release-wrp:has(> .release-row > .left-col) {
  /* Nudge the guide left into the gutter so it sits farther from the form column */
  --cr-vline-shift: 18px;
  --cr-line-extend-top: 40px;
  --cr-line-extend-bottom: 70px;
  /* Comfortable width for step labels + numbers (translations may be longer than EN). */
  --cr-tab-col-min: 16rem;
}

/* Measure the card width — not the viewport — so wide desktops keep the original Bootstrap column ratio. */
@supports (container-type: inline-size) {
  .create-release-wrp:has(> .release-row > .left-col) {
    container-type: inline-size;
    container-name: cr-release;
  }
}

/*
 * Below ~1600px card width, col-lg-2 (~16.7%) is often still tight; enforce --cr-tab-col-min.
 * Very wide cards keep default Bootstrap columns.
 */
@supports (container-type: inline-size) {
  @container cr-release (max-width: 1599.98px) {
    @media (min-width: 768px) {
      .create-release-wrp .release-row > .left-col {
        flex: 0 0 auto;
        width: auto;
        min-width: var(--cr-tab-col-min);
        max-width: 100%;
      }

      .create-release-wrp .release-row > .right-col {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 100%;
      }
    }
  }
}

/* No container queries: approximate the same “narrow main column” case (does not alter very wide desktops). */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) and (max-width: 1599.98px) {
    .create-release-wrp .release-row > .left-col {
      flex: 0 0 auto;
      width: auto;
      min-width: var(--cr-tab-col-min);
      max-width: 100%;
    }

    .create-release-wrp .release-row > .right-col {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      max-width: 100%;
    }
  }
}

@media (max-width: 1500px) {
  .create-release-wrp:has(> .release-row > .left-col) {
    --cr-line-extend-top: 20px;
    --cr-line-extend-bottom: 20px;
  }
}

.create-release-wrp:has(> .release-row > .left-col)::after {
  display: none !important;
}

.create-release-wrp:has(> .release-row > .left-col) .release-row > .left-col {
  position: relative;
  anchor-name: --cr-tab-col;
}

/* Default: hide wrapper ::before (fallback + anchor both controlled below) */
.create-release-wrp:has(> .release-row > .left-col)::before {
  display: none !important;
}

/* Fallback when anchor positioning is not available */
.create-release-wrp .release-row > .left-col::after {
  content: "";
  position: absolute;
  left: calc(100% - var(--cr-vline-shift));
  top: calc(-1 * var(--cr-line-extend-top));
  bottom: calc(-1 * var(--cr-line-extend-bottom));
  width: 1px;
  pointer-events: none;
  z-index: 0;
  background: #22202c;
  opacity: 0.8;
  box-shadow: 1px 0 0 #000;
}

/* Full card height: anchor the line to the tab column’s right edge */
@supports (anchor-name: --cr-vline-test) {
  .create-release-wrp:has(> .release-row > .left-col)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    position-anchor: --cr-tab-col !important;
    left: calc(anchor(right) - var(--cr-vline-shift)) !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: 1px !important;
    margin: 0 !important;
    pointer-events: none;
    z-index: 0;
    background: #22202c;
    opacity: 0.8;
    box-shadow: 1px 0 0 #000;
  }

  .create-release-wrp .release-row > .left-col::after {
    display: none !important;
    content: none !important;
  }
}

html.light-mode .create-release-wrp:has(> .release-row > .left-col)::before,
html.light-mode .create-release-wrp .release-row > .left-col::after {
  background: #e6e6e6;
  opacity: 0.8;
  box-shadow: none;
}

html.dark-mode .create-release-wrp:has(> .release-row > .left-col)::before,
html.dark-mode .create-release-wrp .release-row > .left-col::after {
  background: rgba(34, 32, 44, 0.6);
  opacity: 1;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.6);
}

/* Pull tab-title underline left so it meets the vertical guide (same offset as line). */
.create-release-wrp:has(> .release-row > .left-col)
  .release-row
  > .right-col
  .tab-informetion
  > .tab-title {
  margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem) - var(--cr-vline-shift));
  padding-left: calc(0.5 * var(--bs-gutter-x, 1.5rem) + var(--cr-vline-shift));
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .create-release-wrp:has(> .release-row > .left-col)::before,
  .create-release-wrp .release-row > .left-col::after {
    display: none !important;
    content: none !important;
  }

  .create-release-wrp:has(> .release-row > .left-col)
    .release-row
    > .right-col
    .tab-informetion
    > .tab-title {
    margin-left: 0;
    padding-left: 0;
  }
}