ScryNewInvoke {
  display: grid
  grid-template-columns: 1fr
  grid-template-rows: auto auto
  grid-column-gap: 1rem
  grid-row-gap: 0

  h1 {
    text-transform: uppercase
    font-size: .8rem
    letter-spacing: .1rem
    color: #fff
  }

  div.details {
    border-radius: var(--br)
  
    padding: var(--boundary)
    background: hsla(0, 100%, 100%, .5)

    min-height: 20vh

    display: grid
    grid-template-columns: auto 1fr
    grid-gap: 2rem
    justify-content: start
    align-content: start
    align-items: center

    label {
      color: #fff
      font-size: .9rem
      filter: drop-shadow(0 0 2px hsla(0,100%,0%,0.1))
      letter-spacing: 1px
      font-weight: 600
      text-transform: uppercase
    }

    div.closes-at {
      display: grid
      justify-content: start
      align-items: center
      grid-gap: .5rem
      grid-template-columns: 10rem 2rem 2rem

      font-size: 1.2rem
      font-family: monospace

      div.closes-at-helper {
        margin-left: .5rem
      }

      button {
        min-width: initial
      }
    }

    (input) {
      background: #fff
      padding: .5rem
      border: none
      outline: none
    }
  }

  div.actions {
    justify-self: end
    margin-top: 2rem
  }
}