#ticket-shop-item-detail-view {
  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  width: 100%;
  max-width: 48rem;
  max-height: min(min(88dvh, 100lvh - 0.8rem), 72rem);
  overflow: clip;

  &[shown] {
    transition: none;
  }

  @media (width >= 680px) and (height >= 620px) {
    max-height: min(min(80dvh, 100lvh - 0.8rem), 64rem);

    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }

  > .related {
    --content-gap: 1.6rem;
    --section-border-radius: 1.4rem;
    --section-height: 3.2rem;
    --section-top: 1.6rem;

    position: relative;
    padding: 0 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    background: white;
    isolation: isolate;

    &::before {
      content: "";
      position: sticky;
      top: 0;
      z-index: 1;
      align-self: center;
      margin-bottom: calc(0rem - var(--content-gap) - var(--section-border-radius));
      width: 100%;
      height: calc(var(--section-top) + var(--section-border-radius));
      background: white;
    }

    > .state {
      padding: 1.2rem;
      border: var(--toolbar-border);
      border-radius: 1.2rem;
      text-align: center;
      text-wrap: balance;

      &[data-error] {
        color: var(--color-red);
      }
    }

    > :is(.related-section, .related-items)[hidden] {
      display: none;
    }

    > .related-section {
      position: sticky;
      top: var(--section-top);
      z-index: 2;
      margin: 0;
      border-radius: var(--section-border-radius);
      padding: 0.4rem 1.6rem;
      min-height: var(--section-height);
      display: flex;
      align-items: center;
      font-size: 1.6rem;
      font-weight: 600;
      background: var(--toolbar-background-color);
    }

  }

  > .missing {
    padding-bottom: 1.6rem;

    > .title > span {
      display: block;
    }
  }
}

#ticket-shop-item-detail-slide {
  > main {
    --content-padding: 2.4rem;

    padding: var(--content-padding);
    background: white;
    transition: background 0.25s;

    > .detail-state {
      margin-bottom: 1.6rem;
      padding: 1.2rem;
      border: var(--toolbar-border);
      border-radius: 1.2rem;
      text-align: center;
      text-wrap: balance;
      background: rgba(255, 255, 255, 0.78);

      &[data-error] {
        color: var(--color-red);
      }
    }

    > .item {
      > .name {
        font-size: 2rem;
        font-weight: 600;
        text-align: center;
        text-wrap: balance;
      }

      > .qrcode {
        margin: 1.6rem auto 0;
        width: min(16rem, 100%);
        aspect-ratio: 1;

        > :is(canvas, img, svg) {
          width: 100% !important;
          height: 100% !important;
        }
      }

      > .id {
        margin: 0.8rem auto 0;
        width: fit-content;
        text-align: center;
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        letter-spacing: 0.04em;
        color: rgba(0, 0, 0, 0.68);
      }

      > .apple-wallet:not([hidden]) {
        margin: 1.6rem auto 0;
        width: 11rem;
        display: block;

        > img {
          display: block;
          width: 100%;
        }
      }

      > dl {
        margin-top: var(--content-padding);
        border: var(--toolbar-border);
        border-radius: 1.6rem;
        display: grid;
        overflow: clip;
        background: transparent;

        &[hidden] {
          display: none;
        }

        > div:not([hidden]) {
          padding: 1rem 1.2rem;
          display: grid;
          grid-template-columns: minmax(10rem, 1fr) 2fr;
          align-items: center;
          gap: 1rem;
          background: rgba(255, 255, 255, 0.66);

          &:has(~ div:not([hidden])) {
            border-bottom: var(--toolbar-border);
          }

          > dt {
            font-weight: 600;
          }

          > dd {
            min-width: 0;
            overflow-wrap: anywhere;
          }
        }

        > .controlled {
          &[data-controlled="true"] > dd {
            color: var(--color-green);
          }

          &[data-controlled="false"] > dd {
            color: black;
          }
        }
      }

      > dl:first-of-type {
        margin-top: 2rem;
      }

      > .comment {
        margin-top: var(--content-padding);
        display: grid;
        gap: 0.8rem;

        &[hidden] {
          display: none;
        }

        > header {
          padding-left: 0.8rem;
          display: flex;
          align-items: center;
          gap: 0.8rem;

          > label {
            font-weight: 600;
          }

          > .save-comment {
            margin-left: auto;
            padding: 0;
            width: 2.4rem;
            min-width: 2.4rem;
            height: 2.4rem;

            > svg {
              width: 1.6rem;
              height: 1.6rem;
            }
          }
        }

        > textarea {
          border: var(--toolbar-border);
          border-radius: 1.2rem;
          padding: 0.8rem 1rem;
          width: 100%;
          min-width: 0;
          height: auto;
          min-height: calc(2lh + 1.6rem + 2px);
          resize: none;
          field-sizing: content;
          color: black;
          background: rgba(255, 255, 255, 0.66);
          font: inherit;

          &:read-only {
            color: rgba(0, 0, 0, 0.68);
          }
        }
      }

      > dl > div:not([hidden]) > dd.date-lines > span {
        display: block;
      }
    }
  }

  > .actions {
    justify-content: center;

    &[hidden] {
      display: none;
    }
  }
}

#ticket-shop-item-detail-view[data-control-state="confirmed"] #ticket-shop-item-detail-slide > main {
  background:
    radial-gradient(
      circle at 50% 38%,
      white 0,
      rgba(255, 255, 255, 0.94) 18%,
      oklch(from var(--color-green) l c h / 0.3) 58%,
      oklch(from var(--color-green) l c h / 0.62) 100%
    ),
    white;
}

#ticket-shop-item-detail-view[data-control-state="checked"] #ticket-shop-item-detail-slide > main {
  background:
    radial-gradient(
      circle at 50% 38%,
      white 0,
      rgba(255, 255, 255, 0.94) 18%,
      oklch(from var(--color-red) l c h / 0.3) 58%,
      oklch(from var(--color-red) l c h / 0.62) 100%
    ),
    white;
}

#ticket-shop-item-detail-view[data-control-state="checked"] #ticket-shop-item-detail-slide .controlled[data-controlled="true"] > dd {
  color: var(--color-red);
}

@media (width < 420px) {
  #ticket-shop-item-detail-view > .related {
    padding: 0 1.2rem 1.6rem;

  }

  #ticket-shop-item-detail-slide > main {
    --content-padding: 1.6rem;

    > .item > dl > div:not([hidden]) {
      grid-template-columns: 9rem minmax(0, 1fr);
      gap: 0.8rem;
    }
  }
}